【常德网站优化】如何将页脚固定在页面底部(多种方法实现)

作为一个Web的前端攻城师，在制作 页面 效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么 如何 将Web页面的“footer”部分永远 固定 在页面的 底部 呢？注意了这里所说的是 页脚 footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。如下图所示：

复制代码

<div>
<div>Header Section</div>
<div>
页面容容部分
</div>
<div>Footer Section</div>
</div>

复制代码

<div>
<div>Header Section</div>
<div>
<div>Left Sidebar</div>
<div>Main content</div>
<div>Right sidebar</div>
</div>
<div>Footer Section</div>
</div>

复制代码

html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*IE6不识别min-height*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/*等于footer的高度*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*脚部的高度*/
background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}

复制代码