[英]How can I push my footer down to the very bottom of the page, regardless of how much or little content is in the body?
我正在动态生成网页主要内容的内容。 该页面还有一个页眉和一个页脚。 标题保持固定在顶部就好了,但页脚拥抱身体的底部而不是锚定到页面的底部。 即使动态生成的内容量为零或最小,我也希望页脚能够拥抱页面的底部。 我怎样才能做到这一点?
您需要检测页面的高度+内容以及具有该网站的窗口的高度。 如果高度小于窗口,则需要将位置固定,否则,让它正常坐下并按内容向下推。 这是一般方法。 如果您发布代码,我可以帮助您了解如何使其工作。
以下是粘性页脚的示例: 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.