html固定在页面底部,css中页脚如何固定在底部？

在进行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;

}

更多相关知识请关注前端学习网站