可以通过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布局实现将一个块容器拉伸到与另一个块容器相同高度的方法。这种方法适用于需要在页面中创建两个相等高度的块容器的情况,例如创建两栏布局或者两个相邻的模块需要具有相同的高度。
领取专属 10元无门槛券
手把手带您无忧上云