Question

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

下面的代码非常有用，无论我查看哪一个设备，这两列都是全高的。

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

如果我没有弄错的话，bootstrap没有考虑导航栏高度进入计算。

我不知道如何解决这个问题。

DEMO 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>

Answer 1

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

删除班级h-100，

将此样式添加到容器

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

然后到div的兄弟导航，（具有类行和辩护 - 内容 - 中心的div）添加样式 flex：1;

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

如何在Bootstrap 4

1 个答案: