Bootstrap,使行填充剩余的屏幕空间

Question

我正在尝试创建一个网站,其标题必须具有13%的高度,并且section1必须完美地填充屏幕的其余部分,并且在第2节加上页脚的情况下,以及如果用户向下滚动那些最后两个适合屏幕.

我已经度过了一段美好的时光,我遇到的问题是容器不会超出高度,所以有一个溢出的section2和页脚在它上面.我在尝试这个:

扩展具有100%高度的父容器以考虑浮动内容

但无法使其发挥作用.

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

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

您的问题似乎是页脚不会保持向下并向上爬？这是一个常见问题，应该有几个示例可以快速搜索。