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

无论身体中有多少内容，我怎样才能将页脚向下推到页面的最底部？

2 个答案: