jquery - 无论正文中有多少内容，如何将页脚向下推到页面的最底部？

Question

我正在动态生成网页主要内容的内容。该页面还具有页眉和页脚。页眉保持锚定在顶部就好了，但页脚拥抱正文的底部，而不是锚定到页面的底部。即使动态生成的内容量为零或最少，我也希望页脚紧贴页面底部。我怎样才能做到这一点？

Answer 1

您需要检测页面 + 内容的高度以及包含该网站的窗口的高度。如果高度小于窗口，则需要进行位置固定，否则，让它正常坐下并被内容推下。这是一般方法。如果您发布代码，我可以帮助您展示如何使其工作。

Answer 2

这是一个粘性页脚的示例：http: //twitter.github.io/bootstrap/examples/sticky-footer.html

下面的 CSS 取自上面的链接。

CSS

/* 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;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
     margin-left: -20px;
     margin-right: -20px;
     padding-left: 20px;
     padding-right: 20px;
}
}



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
     width: auto;
     max-width: 680px;
}
.container .credit {
     margin: 20px 0;
}



/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
     width: auto;
     max-width: 680px;
}
.container .credit {
     margin: 20px 0;
}