使页脚高度延伸到页面底部 [英] Make footer height extend to bottom of the page
本文介绍了使页脚高度延伸到页面底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个非常简单的网页有问题。
I have a very simple webpage with a problem. It ahs 3 divs that sit ontop of each other, the header, content then footer.
我想让我的页脚高度扩展到页面底部。我如何做到这一点?
标题具有恒定的高度,内容将根据从AJAX调用接收的内容的高度变化。所以我不能明确设置它。
The header has a constant height, the content will vary in height depending on the content received from an AJAX call. So I cant explicitly set it.
讨论我的JSFiddle: http://jsfiddle.net/ 5U6ZB / 2 / embedded / result /
Heres my JSFiddle: http://jsfiddle.net/5U6ZB/2/embedded/result/
<div id="header"></div>
<div id="content">
<!-- height is dynamic sometimes it will be full of divs that makes it
longer than the screen height other times it only has 1 div -->
</div>
<div id="footer">
<!-- How do I make the footer height fill up the rest of the page height? -->
</div>
body { background-color: white; }
div { width: 100%; }
#header {
height: 400px;
background-color: RGB(200,200,200);
}
#content {
}
#footer {
background-color: RGB(112,112,112);
/*How do I make the footer height fill up the rest of the page height?*/
}
推荐答案
html {
background-color:#093; /*the footer color*/
}
body {
background-color: #f6f; /*the body color*/
}
这篇关于使页脚高度延伸到页面底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文