使页脚高度延伸到页面底部 [英] 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屋！