如何使页眉和页脚之间的100％div高度？ [英] How to make 100% div height between header and footer?

问题描述

问题在这里： http://jsfiddle.net/x8XZ6/3/

HTML

<div id="top"></div>
<div id="content">Why this div is not 100% height? I need this to fill all the way to the start of the footer if content is to little. If content extends beyond the blue footer, it should push the footer down.</div>
<div id="anchored-footer"></div>

CSS

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; min-height: 100%;
    height: 0;
    /* height: 0; interestingly, if height is set to 0, it expands 100% (see also #content margin-bottom) */
    /* but I need it to extend up to the blue bar only. */
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    position: absolute;
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    height: 100%;
    /* margin-bottom: -50px; can a negative margin work here? */
}

可以不使用绝对定位头来实现？

Can this be achieved without using absolute positioned header?

推荐答案

您需要将BODY更改为身高：100％;

You DO need to change BODY to height:100%;

工作演示

* { margin: 0; padding: 0 }
html { height: 100%; }
body {
    position: relative; height: 100%;
}
#top {
    height: 50px;
    background-color: red;
}
#anchored-footer {
    bottom: 0;
    height: 50px;
    background-color: blue;
    width: 100%;
}
#content {
    border: 5px solid green; /* because I need this border to go all around the content area */
    background-color: yellow;
    min-height:calc(100% - 110px);
}

*注意：没有位置： t需要它，特别是如果你想你的内容推你的页脚下来..然后绝对不要使用绝对。

*Notice: No position:absolute is used at all.. you don't need it, especially if you want your content to push your footer down.. then definitely don't use absolute.

这篇关于如何使页眉和页脚之间的100％div高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！