html页脚挡住内容,css让页脚始终在底部不论页面内容多少

让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。

方案一：

复制代码代码如下:

body,html {

margin: 0;

padding: 0;

height:100%;

}

#main {

position: relative;

min-height:100%;

background:#eee;

}

#content {

padding: 10px;

padding-bottom: 100px;

}

#footer {

position: absolute;

bottom: 0;

height: 100px;

width: 100%;

background:lightblue;

}

for(var i=0; i<400; i++){

document.write(i+'
');

}

Footer

方案二：

复制代码代码如下:

css实现页脚始终在最底部

* {padding: 0;margin: 0;}

html {*overflow: auto;}

body {_width: expression(this.parentNode.clientWidth);}

html,body {height: 100%;}

.section {min-height: 100%;_height: 100%;}

.footer {height: 60px;background: #000;margin-top: -60px;color: #FFF;}

for(var i=0; i<400; i++){

document.write(i+'
');

}

我是页脚

让页脚始终固定在屏幕底部：

复制代码代码如下:

body{margin:0px;padding:0px;overflow:hidden;padding-top:22px;padding-bottom:22px;}

#header{background-color:blue;color:white;position:absolute;top:0px;left:0px;height:16px;width:100%;}

#content{background-color:yellow;width:100%;height:100%;overflow:auto}

#footer{background-color:green;color:white;width:100%;height:16px;position:absolute;bottom:0px;left:0px;}

header

for(i=0;i<1000;i++){

document.write(i+"

");

}

footer