内容div没有填充页面,页脚未对齐

时间:2013-05-07 16:40:33

标签: css html height footer

我有一个页面有一个固定的高度标题,内容(中间部分)应该填充屏幕的大部分直到页脚,以及应该粘贴在页面底部的固定高度页脚:

http://jsfiddle.net/PyQed/

我遇到的问题是:

  1. 内容div(#content-wrapper)未填充页面,即使我为min-height: 100%;height: 100%;设置了htmlbody标签也是。

  2. 页脚底部有间隙,而不是粘在页面的最底部。显然body元素没有扩展到页面的完整高度,即使html也是如此。

  3. 我遵循了this page关于如何让页脚粘贴在页面底部的建议,而且它似乎不适用于我的特定设置。

1 个答案:

答案 0 :(得分:1)

像这样的事情会发生DEMO http://jsfiddle.net/KFur6/517/

html, body {
    height: 100%;
}
#divHeader {
    width: 100%;
    height: 150px;
    background:blue;
}
#divContent {
    min-height: 100%;
    height: auto !important;
    /*Cause footer to stick to bottom in IE 6*/
    height: 100%;
    margin: 0 auto -30px;
    /*Allow for footer height*/
    vertical-align:bottom;
    background:yellow;
}

#divPush {
    height: 30px;
}
#divFooter {
    width: 100%;
    height: 30px;
    /*Push must be same height as Footer */
    bottom:0;
    background:blue;
}