javascript - 如何在 Bootstrap 4 中实现全高列

Question

我正在使用 Bootstrap 4 Beta 尝试使 2 列全高，无论屏幕尺寸是多少。

下面的代码效果很好，无论我在什么设备上查看这个，两列都是全高。

但是，当我在 container 中的 row 上方添加 Bootstrap 导航栏时，我开始看到页面有额外的高度，最后我得到了一个滚动条。

如果我没记错的话，bootstrap 不会在计算中考虑导航栏高度。

我不确定如何解决这个问题。

演示 https://jsfiddle.net/a2z4paes/1/

尝试删除 nav block ，您会看到列变成全高且没有滚动条。

这是我的HTML

<div class="container h-100">
    <div class="row justify-content-center h-100">
        <div class="col-md-8" style="background: lightgreen; height: 100%">
            <h1>test</h1>
        </div>

        <div class="col-md-4" style="background: lightblue;">
            <h1>test</h1>
        </div>
    </div>
</div>

Answer 1

Flexbox 是最好的解决方案，即使您可以使用 calc() 函数修复它，但它更像是一个 hack。这是更新后的 fiddle ，下面给出了我完成的步骤 https://jsfiddle.net/sandeepcnath/a2z4paes/4/

删除 h-100 类，

将这个样式添加到容器中

container {
height: 100%;
display: flex;
flex-direction: column;
}

然后到与 nav 同级的 div，(具有类 row &justify-content-center 的 div)添加样式 flex :1；

然后你可以看到高度为100%，即使你打开或关闭导航也不会出现滚动条。