将一个块容器拉伸到与另一个块容器相同的高度
可以通过CSS中的Flexbox布局或Grid布局来实现。
使用Flexbox布局时，可以将两个块容器放置在一个父容器中，并将父容器的display属性设置为flex。然后，通过设置flex属性来控制两个块容器的宽度比例，同时设置align-items属性为stretch，使两个块容器的高度相同。
示例代码如下：
<div class="parent-container">
<div class="block-container1">
<!-- 内容1 -->
</div>
<div class="block-container2">
<!-- 内容2 -->
</div>
</div>.parent-container {
display: flex;
align-items: stretch;
}
.block-container1, .block-container2 {
flex: 1;
}使用Grid布局时，可以将两个块容器放置在一个父容器中，并将父容器的display属性设置为grid。然后，通过设置grid-template-rows属性为auto和1fr，使两个块容器的高度相同。
示例代码如下：
<div class="parent-container">
<div class="block-container1">
<!-- 内容1 -->
</div>
<div class="block-container2">
<!-- 内容2 -->
</div>
</div>.parent-container {
display: grid;
grid-template-rows: auto 1fr;
}以上是使用Flexbox布局和Grid布局实现将一个块容器拉伸到与另一个块容器相同高度的方法。这种方法适用于需要在页面中创建两个相等高度的块容器的情况，例如创建两栏布局或者两个相邻的模块需要具有相同的高度。
相关·内容
我正在尝试将一个块容器拉伸到与周围块相同的高度，或者至少与它旁边的内联容器的高度相匹配。这是我的带有盲文本的xsl代码： <fo:block margin="0" padding="0" font-size="9pt" border="
浏览 11提问于2019-05-03得票数 0
我有一个相当简单的问题。我有一个有三个孩子的容器div --两个div和一个表。id='table1'> </table> </div>
该表有一些设置其高度的内容呈现页面时
浏览 1提问于2014-01-29得票数 6
回答已采纳
3回答
我有一个固定宽度为960px的DIV和一个没有特定宽度的嵌套容器，所以它们可以延伸到父容器。有没有可能，在不移除外部容器的情况下，将内部容器拉伸到整个页面宽度，同时，内容应该与外部容器一样宽。下面是一个小示例：|
浏览 1提问于2013-05-19得票数 3
我使用http调用从外部源获取一个html块。</div>
以上图片的图像部分宽度为50%，文本宽度为50%。我想保持高宽比，因此图像有一个固定的宽度，但<em
浏览 0提问于2016-04-19得票数 0
我有一个容器，里面有许多但可变的块。 .block我需要这些区块中的一个有一个高度与溢出隐藏。这个想法是，.chat div将有一个高度，溢出隐藏，然后在里面将有一个溢出自动.chatlog div。.chatlog <- need a overflow auto
.chat
浏览 4提问于2011-06-04得票数 1
回答已采纳
1回答
所以我一直试图为一堆缩略图制作一个水平滚动菜单。我已经找到了很好的信息，如何使它水平滚动，但我的缩略图仍然堆叠在一起，仍然垂直滚动在我的div。当'x‘方向出现溢出时，我希望所有的缩略图都在一个行中水平滚动。我也希望我的div保持在与缩略图宽度成正比的高度。现在，如果我执行auto，容器div将更改为一个足够大的高度，可以在多行而不是一
浏览 0提问于2017-07-12得票数 0
回答已采纳
2回答
(，似乎不可能，)
，我希望橙色块根据蓝色块的高度调整其高度。蓝色块被绝对定位在容器块的底部。(并且尽量少使用)
HTML
浏览 3提问于2014-03-23得票数 0
3回答
我有一个DIV容器，用height: x缩放到一定的高度，而在容器中，我有一个用height: 100%设计的IMG。然后，容器的宽度只延伸到视口的宽度。我试图达到的效果是使容器的宽度与子元素的宽度相匹配(图像比视口宽)。对于Sencha Touch应用程序，我需要这种行为，其中我有一个滚动面
浏览 0提问于2013-03-18得票数 0
回答已采纳
3回答
我在容器里有个图像。图像的高度为2px，容器没有定义的高度。由于某种原因，容器接受高度的18px。如果我使一个图像18px高，那么div取22px，如果图像是20px，div就是24px。我尝试使用显示:块，内嵌和内联块。同样的事情。然后我试着展示: flex和它起作用了。此外，我想，如果我只是删除div，然后我将只有与
浏览 0提问于2019-06-25得票数 0
回答已采纳
因此，我们有一个包含子元素的包含块。子元素具有height: 100%或其他百分比。
如果包含块具有高度、填充和边框集，是否将子元素的高度计算为包含块的内容框高度、填充框高度、边框高度的100%？如果我们更改容器块的装箱大小，但也进行其他更改，例如容器块<e
浏览 1提问于2015-07-08得票数 2
回答已采纳
我有一个容器div和两个嵌套的div。我无法控制这些嵌套div的内容。
本质上我需要的是使两个嵌套的div始终具有相同的高度。我认为这可以通过赋予容器div高度来实现:auto，这样它就可以将自己的高度伸展到两个嵌套的div中最高的一个(每个嵌套的div都延伸到适合自己<em
浏览 2提问于2010-03-06得票数 10
2回答
我有一个header元素，里面有2个元素-- img和p元素。我尝试过height:auto，但这只会带来意想不到的不稳定结果。
浏览 0提问于2012-01-11得票数 0
回答已采纳
1回答
我刚刚在这项任务上花了大约一周的时间，我正在慢慢地放弃。基本上，我正在尝试建立一个布局的绘图，将改变其大小的基础上选定的产品类型。这是一幅非常简单的图画。Axe (顶部容器)是一个白色边框、固定宽度和高度的普通容器，从容器顶部延伸到轮子底部。轮子(底部容器)，也是另一个填充白色的容器<
浏览 16提问于2020-02-18得票数 2
回答已采纳
我有一个段落在右边浮动，一个图像在左边浮动。他们住在同一排。现在，我想使段落和图像的高度始终相等，无论它们在哪个浏览器中运行，也不管它们的窗口或屏幕大小如何。它们的尺寸应该自动匹配。我该怎么做呢？在我的程序中，我使用了width和height，但我不确定它们是否能够自动修复大小。我正在使用的这段代码:也可以在中查看<p>
The height of this paragraph must be the same as
浏览 3提问于2015-04-19得票数 1
回答已采纳
在这个网站上有类似的问题标题，我已经阅读了他们的所有解决方案，但问题总是与Turbolinks或其他问题有关。在本例中，我只使用javascript/jQuery，因此这些解决方案无关紧要。我写了一个简单的脚本，它找到最高的容器，然后调整块中的其他容器的高度与最高的容器相同。我将此脚本应用于Squarespace摘要块
浏览 3提问于2017-06-11得票数 0
回答已采纳
2回答
我在IE6中有一个bug。我已经在这里展示过了。当增加容器高度时，绝对块的位置将更新为容器底部。当你增加内部内容的高度时，绝对块的位置不会更新。如何在IE6中修复此行为
浏览 1提问于2011-06-01得票数 4
3回答
我在我的项目中使用jquery自动完成。自动完成建议的高度有问题。容器超出了文档的高度。它在数据量较大时有效，但对于2-3个重复记录，会有一个巨大的块延伸到文档的底部。请建议我如何将高度限制为文档的高度，无论是否。自动完成建议列表中的记录数。编辑:我的页面中已经有太多的jav
浏览 0提问于2014-05-21得票数 0
3回答
我有一个带有两个容器的标记。第一个设置为“位置:绝对”和所有4个“坐标”，以扩展整个站点(left=right=bottom=top=30px)。在该容器内是另一个容器，其高度设置为"100%“和”显示:内联块“(”内联块“，因为第二个容器应该水平扩展到所需的宽度)。在第二个容器内是一个图像，其高度设置为"1
浏览 9提问于2013-05-02得票数 2
回答已采纳
{ top:0;} position: relative;所以基本上是
我不知道外设的高度或宽度(集装箱A)。右div (容器C)中有一个元素(容器D)必须放在另
浏览 2提问于2012-08-04得票数 2
回答已采纳
4回答
我有一个表，其中包含一些隐藏的行，并有一个可单击的按钮来显示这些隐藏的行。问题是，当我使用链接时，行会显示出来，但主体不会更新它的高度。td>-</td> <td>---</td> </tbody>
</tab
浏览 6提问于2014-02-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
