Question

我试图创建一个网站，其标题必须具有13％的高度，并且section1必须完全填充屏幕的其余部分，并且在第2部分加上页脚的情况下，如果用户滚动一直到最后两个都适合屏幕。

我一直在讨论这个问题，我遇到的问题是容器没有超出高度，所以有一个第2节溢出，页脚在它上面。我正在尝试这个：

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

我会尝试使用class container-fluid为div添加类填充高度。那可能有用。或者它不是最佳做法，但尝试将其添加到内联中。我发现有时无论出于什么原因内联即使把它放在css中也不会有效。如果这不起作用，请告诉我。祝你好运！

Answer 2

你的问题似乎是一个不会停留下来并爬起来的页脚？这是一个常见问题，应该有几个例子可以快速搜索。

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

2 个答案: