html页脚位置调整,将页脚始终控制在页面最下方的几种方法

html和body的高度并不一定相同，在内容少的时候，body的高度要小于html，当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候，此时html的高度大于body的高度。网页中的元素都是以body最为参考，所以有必要保持html和body的高度相同。

html,body{height:100%;}

1. 第一种方法

在body中使用两个容器，包括网页的页脚和另外一部分(container)。设置container的高度为100%；页脚部分使用 负外边距 保持其总是在最下方。

css 部分:

html, body {

height:100%;

}

.fl {

float:left;

display:inline;

}

#container {

width:100%;

height:300px;

overflow:hidden;

height:100%;

border-bottom:70px #FFFFFF solid;

}

.aside {

width:30%;

}

.article {

width:70%;

}

#footer {

height:50px;

width:100%;

clear:both;

margin-top:-50px;

border-bottom:1px solid #e0e0e0;

border-top:1px