jquery - 我怎样才能将页脚推到页面的最底部，而不管正文中的内容有多少？

Question

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

Answer 1

这是一个粘性页脚的例子: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;
}