bootstrap-4 高度 100，内容溢出答案

【问题标题】：bootstrap-4 height 100 with overflowing contentbootstrap-4 高度 100，内容溢出
【发布时间】：2017-11-29 18:55:12
【问题描述】：

这是另一个引导 h-100 问题，但它增加了一些复杂性。

目标是拥有一个包含三列背景图像的引导容器。左边和中间的 cols 有一个背景颜色集，应该总是适合容器的高度。中间列包含一些文本（在较小的屏幕上会增长并超过视口高度）。总而言之，容器应该适合视口高度。

我在这里创建了一个示例：https://www.codeply.com/go/2iMM4dthOK

目前我使用body{min-height: 100%}，这会在笔记本电脑视口上产生良好的效果。但是当您切换到桌面视口时，您会注意到容器不适合视口。有一个名为body{height: 100%} 的解决方案。是的，解决了！还没有。切换回笔记本电脑视口，您会看到现在容器不会随着中间列的内容而增长。

有任何 CSS 魔术师可以提供帮助吗？

编辑显然视口需要一定的高度才能观察到问题。我目前正在测试台式机：1440x780 和笔记本电脑：1200x780 分辨率。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

从所有 div 中删除 h-100 并将 display:flex 添加到行添加css等于下面的行

css:
.equal{
display:flex;
}   
html:
<div class="container-fluid">
        <div class="row equal">
            <div class="col-sm-3 col-left">
                col1
            </div>
            <div class="col-sm-3 col-middle">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
            <div class="col-sm-6 col-right">
                col3
            </div>
        </div>
    </div>

【讨论】：

喜欢codeply.com/go/EtfQ4Jaxmr 吗？不为我解决。结果与我的body{min-height: 100%} 示例相同。顺便说一句，引导程序 .row 已经设置了display: flex。