Question

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

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

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

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

那里的任何CSS魔术师可以提供帮助吗？

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

Answer 1

从所有div中删除h-100并添加display：flex to row 添加等于行的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>

bootstrap-4高度100，内容溢出

1 个答案: