html - 每个屏幕尺寸的最大高度 - bootstrap

Question

我想要一个全屏页面没有全局滚动。背景颜色应始终为屏幕高度的 100%。

如果列的内容太大(如屏幕截图中的绿色列)，则该列本身应该有一个垂直滚动条。

不滚动:

滚动:

我的 HTML 代码:

<div class="container-fluit">
<div class="row">
    <div class="col-lg-12">
    </br>
    </div>
</div>
    <div class="row">
        <div class=" orange col-lg-4 ">
            so much content here
        </div>
    
        <div class="col-lg-8">
            so much content here
        </div>
    </div>

我的 CSS 代码:

.col-lg-4 {
    background:green;
}
.col-lg-12 {
    background:blue;
}
.col-lg-8 {
    background: orange;
}

Answer 1

您可以尝试为正文设置 100vh 的高度。这与 overflow-y: hidden; 结合将删除滚动条。

看看这个Fiddle