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

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

下面的代码很好用，无论我查看哪种设备，这两列都是全高。

但是，当我在container上方row内添加引导导航栏时，我开始看到页面有额外的高度，最后出现滚动条。

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

我不确定如何解决此问题。

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

尝试删除nav块，您将看到列变为完整高度，没有滚动条。

这是我的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>

最佳答案

即使您可以使用calc（）函数修复Flexbox，Flexbox也是最好的解决方案，但它更像是黑客。
这是更新的小提琴，下面给出了我已完成的步骤
https://jsfiddle.net/sandeepcnath/a2z4paes/4/

删除h-100类，

将此样式添加到容器中

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

然后向导航的同级div（具有类row＆justify-content-center的div）添加样式
    flex：1;

那么您可以看到高度为100％，即使打开或关闭导航栏也不会出现滚动条。

关于javascript - 如何在Bootstrap 4中实现全高列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46024997/