如何使Bootstrap粘性页脚内容占满整个页面高度？

Question

我正在使用Bootstrap示例，使用CSS创建一个粘性页脚的网站，这一切都很好地工作，当页面被调整大小时，页脚仍然保持在页面底部。在许多页面上，我有需要显示实际全页的内容，除了页脚。因此，页面的内容部分需要设置为100％高度，以便其内容反过来可以调整为全高度。 这里是一个JSFiddle演示问题。 我们如何使绿色容器div成为全高度，因此它在顶部接触页面顶部，在底部接触页脚顶部？

谢谢！

<div id="wrap">
    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
            <h1>Sticky footer</h1>

        </div>
        <p class="lead">This is the sticky footer template taken from the Bootstrap web site.</p>
        <p class="lead">How can we make this green .container div the full height of its parent #wrap div?</p>
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    <div class="container"></div>
</div>

---

#wrap .container {
    background-color: lightgreen;
}
/* Sticky footer styles  */
html, body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push, #footer {
    height: 60px;
}

#footer {
    background-color: #f5f5f5;
}

- Stuart Hallows

Answer 1

我可以解决您的问题。我将它从JSFiddle移动到Codepen，因为我更喜欢Codepen。没有其他原因。 http://cdpn.io/IJHxf 基本上这是我得到答案的地方，他们比我能更好地解释。 http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/ 当你实现那个答案时，我发现height:auto !important;是它不立即起作用的罪魁祸首。在您的#wrap id中将其注释掉以查看其完整效果。Codepen有额外的更改，以真正了解正在发生什么。您真正需要让您的原始问题起作用的是：

#wrap .container {
    background-color: lightgreen;
    min-height: 100%;
    height: auto;  /* this line takes care of "more than enough content problem"  */
}


 html, body {
    height: 100%;
    background-color: #dedede;
    padding: 0;
    margin: 0;
}


 #wrap {
    min-height: 100%;
    /* height: auto !important; */
    height: 100%;
    margin: 0 auto -60px;
}

实际上，更明智的做法是，不要注释掉整行代码 height: auto !important;，而是只需去掉中间的 !important。例如：

#wrap {
    height: auto !important;
    /* changed to */
    height: auto;
}

我调整了一些颜色，以便更清楚地显示实际发生的情况。您将在codepen中看到。在codepen中有更多的注释，以帮助您了解我做了什么。

此外，我发现由于边距，您的固定页脚给我的页面添加了滚动条。对我来说，我使用下面的代码去掉了滚动条。

margin: 0 auto -60px;
/* changed to */
margin: 0 auto -80px;

- camdixon