html - Bootstrap，使行填充剩余的屏幕空间

Question

我正在尝试创建一个网站，其中页眉必须具有 13% 的高度，并且 section1 必须完全填充屏幕的其余部分，并且低于 section2 和页脚的情况相同，因此如果用户滚动所有最后两个将适合屏幕。

我已经在这上面花了很长时间了，我遇到的问题是容器没有增长到超过高度，所以 section2 溢出了，页脚在它上面。我正在尝试这个:

Expanding the parent container with 100% height to account for floated content

但无法让它工作。

我的原始代码一团糟，所以我尽力清理它以专注于此。它看起来像这样:

HTML

<header> </header>
<div class="container-fluid">
    <div id="section1" class="row-fluid fill-height" >
        <div  class="span6" id="red-space">
                <!-- STATIC CONTENT -->
        </div>
        <div class="span6">
                <!-- STATIC CONTENT -->
        </div>
    </div>
    <div id="section2" class="row-fluid fill-height">
                <!-- STATIC CONTENT -->
    </div>
</div>

CSS

html, body
{
  height: 100%;
}

body{
    background-color:#fafafa;
    color:#5b5b5b;
    min-width:0;
}

header, footer {
    height: 13%;
}

.container-fluid {
    padding: 0;
    min-height:83%;
    height: 83%;
    overflow: hidden;
}

.fill-height{
    height:100%;
}

Answer 1

我会尝试为带有 container-fluid 类的 div 添加类 fill-height。那可能行得通。或者这不是最佳做法，但请尝试将其内联添加。我发现有时无论出于何种原因，内联都可以工作，即使将它放在 css 中也行不通。如果这不起作用，请告诉我。祝你好运!