如何将页脚固定在页面底部

方法一：

HTML:

<div id="container">
<div id="hearder">页头区域</div>
<div id="page" class="clearfix">页面内容</div>
<div id="footer">页脚</div>
</div>

CSS:

html,body{
margin:0;
padding:0;
height:100%;
}
#container{
min-height:100%;
height:auto !important;
height:100%;
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：

<div id="container">
<div id="page">页面内容</div>
</div>
<div id="footer">页脚</div>

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:relatvie:
margin-top:-60px;
height:60px;
clear:both;
background:#c6f;
}

参考：Pure CSS：Sticky Footer

方法三：

HTML：

<div id="container">
<div id="page">页面内容</div>
<div class="push"></div>
</div>
<div id="footer">页脚</div>

CSS：

html,body{
height:100%;
margin:0;
padding:0;
}
#container{
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -60px;
}
.push,#footer{
height:60px;
clear:both;
}
#footer{
background:#f6c;
}

方法四：

HTML：

<div id="header">页头</div>
<div id="page" class="clearfix">页面内容</div>
<div id="footer">页脚</div>

CSS：

*{
margin:0;
padding:0;
}
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
#footer{
height:60px;
background:#fc6;
width:100%;
}

 

转载于:https://www.cnblogs.com/ecosu/p/4323288.html