如何使 Bootstrap 粘性页脚内容达到整页高度？答案

【问题标题】：How to make Bootstrap sticky footer content go full page height?如何使 Bootstrap 粘性页脚内容达到整页高度？
【发布时间】：2013-07-14 19:32:53
【问题描述】：

我正在使用 Boostrap 示例为使用 CSS 的网站创建粘性页脚，这一切正常，页脚在调整页面大小时保持在页面底部。在许多页面上，我的内容实际上需要整页显示，除了页脚。因此，页面的内容部分需要设置为 100% 高度，以便其内容可以依次调整为全高。

Here's a JSFiddle that demonstrates the problem.

我们怎样才能使绿色容器 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;
}

【问题讨论】：

标签： html css layout twitter-bootstrap sticky-footer

【解决方案1】：

我有你的问题的解决方案。我把它从 JSFiddle 移到了 codepen，因为我更喜欢 codepen。没有其他原因。 http://cdpn.io/IJHxf

这基本上是我从中得到答案的地方，他们解释得比我以往任何时候都好。 http://v1.reinspire.net/blog/2005/10/11/css_vertical_stretch/

但是，当您实施该答案时，我发现 height: auto !important; 是导致它无法立即起作用的罪魁祸首。在您的#wrap id 中将其注释掉，以使其完全生效。代码笔有额外的变化，可以真正看到发生了什么。使您的原始问题发挥作用真正需要的是

#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; 注释掉，您可以去掉 !imporant。例如

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

我更改了一些颜色，以便更清楚地了解实际发生的情况。您将在代码笔中看到这一点。代码笔中有更多的 cmets 来看看我到底做了什么。

另外，我发现由于页边距，您的置顶页脚给了我的页面一个滚动条。对我来说，我用下面的代码摆脱了滚动条。

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

【讨论】：