html页脚怎么不跑到上面去,html – css页脚不显示在页面底部

有两个主要选择：

>固定页脚 – 页脚始终显示在页面底部

>推脚 – 即使内容未填满窗口,页脚也会被推到页面底部

两者中较容易的是固定页脚.

固定页脚

为了固定页脚,在CSS中将页脚的位置设置为固定位置：固定并将页脚放置在页面底部的底部：0px.这是CSS-Tricks的代码片段.

#footer {

position:fixed;

left:0px;

bottom:0px;

height:30px;

width:100%;

background:#999;

}

/* IE 6 */

* html #footer {

position:absolute;

top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

}

推脚

推脚有点棘手.这里是a great graphic,显示了当内容不足时页脚没有停留在页面底部的原因：

基本上,问题正在发生,因为页脚元素被“推”在其上方的元素下面,并且该元素的高度不像页面的高度那么长.为了解决这个问题,你需要确保页脚被“推”到页面的整个高度(减去页脚的高度).

这是怎么做的：

HTML

CSS

html, body {

margin:0;

padding:0;

height:100%;

}

#container {

min-height:100%;

position:relative;

}

#header {

background:#ff0;

padding:10px;

}

#body {

padding:10px;

padding-bottom:60px; /* Height of the footer */

}

#footer {

position:absolute;

bottom:0;

width:100%;

height:60px; /* Height of the footer */

background:#6cf;

}