在进行Web开发实现页面时，可能会遇到这样一种场景：将页脚footer固定在页面的底部，如果页面的主体不能充满屏幕高度，则footer位于 屏幕的底部 ；如果页面的主体超出了屏幕高度，则footer始终位于 页面底部 。
下面我们就来看一下css如何设置页脚固定在页面底部：
方法一：
页面中的html、body、container都必须满足height:100% 。
footer使用相对定位bottom:0，固定在页面底部，页面主体page容器必须要设置一个大于等于footer高度的padding-bottom，将footer的高度计算在page容器中，这样一来footer就会始终固定在页面底部了。
HTML代码：
csshtml,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;
}
方法二：
将html、body、container容器的高度都设为100%，给footer添加一个负值的margin-top，将footer 容器从屏幕外拉上来。这个负值的 margin-top 与 footer 的高度相同。
HTML：
css：html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
}
#page {
padding-bottom: 60px; /*高度等于footer的高度*/
}
#footer {
position: relative;
margin-top: -60px; /*等于footer的高度*/
height: 60px;
clear:both;
background: #c6f;
}
更多相关知识请关注前端学习网站
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
