强制列中的内容在多个断点上具有相同的高度

Posted 2023-03-06

【中文标题】强制列中的内容在多个断点上具有相同的高度

【英文标题】：Forcing content in columns to be the same height over several breakpoints

【发布时间】：2016-04-23 01:36:27

【问题描述】：

我有一个这样的引导布局：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div>
                This block should be the same height as the right column.
                The content in this block is in a scrollable container.
                The scrollable container currently has a fixed height set to allow scrolling.
            </div>
        </div>
        <div class="col-sm-6"></div>
            <div>Block 1 content</div>
            <div>Block 2 content</div>
    </div>
</div>

目前在桌面上的布局如下所示：

当我切换到较小的屏幕尺寸断点时，布局会更改为：

我希望可滚动区域与右侧的两个内容块具有相同的高度。我尝试在行上使用display: flex，但如果我从中删除指定的高度，它会显示可滚动区域的全部内容，这不是我想要的。

我基本上希望右栏决定左栏的高度。

目前我正在使用 javascript 来调整大小，但如果可能的话，我希望在 CSS 中做到这一点。

JsFiddle：https://jsfiddle.net/b12ybxpm/

【参考方案1】：

我基本上希望右栏决定左栏的高度。

尝试添加这个：

.row 
     display: flex;


.left-column,
.right-column 
     display: flex;
     flex-direction: column;


.left-column > *,
.right-column > * 
     flex: 1;

---

通过将display: flex 添加到.row，.row（左列和右列）的子项（弹性项目）将 automatically have equal heights。

但是，flex 项的子项（在本例中为可滚动内容和内容块）不是 flex 项，没有理由拉伸以填充其容器。

因此，将display: flex 应用于父项，然后将子项转换为弹性项目，默认情况下它们会拉伸以填充其容器。

既然您似乎在朝column 方向工作，请给每个孩子一个flex: 1，这样他们就知道朝那个方向伸展。

---

更新（基于相关新代码的修订）

考虑到所有嵌套的 div，您的小提琴中发布的代码有些复杂。

对于所有这些嵌套的 div，我上面的代码很可能无法正常工作，因为它基于您发布的图像（而不是稍后发布的实际代码）。

为了在演示中使用 flexbox（无需 JS）实现相等的高度，您需要将每个嵌套的 div 设为 flex 容器。

这是您的演示，已修改：https://jsfiddle.net/b12ybxpm/4/

【讨论】：

嗨迈克尔，我已经添加了额外的 display:flex，但我仍然有一个问题，即当我删除固定高度时，左列中的内容会增长，直到它适合滚动列表中的所有内容。

你能发布完整的代码吗？或者提供现场演示或网站以供查看？

添加了 JsFiddle 的链接。

谢谢，这很好用！对于误导性图片，我们深表歉意。

完成，恢复图像。