footer置于页面最底部

SaRanCao

于 2014-11-20 11:15:20 发布

阅读量2k

点赞数

分类专栏： Web前端文章标签： css 前端布局

本文链接：https://blog.csdn.net/coolcaosj/article/details/41309747

版权

Web前端专栏收录该内容

13 篇文章

订阅专栏

我们在做网页的时候，有时候页面内容太短，导致footer元素会浮在上面，很影响视觉。如下图：

将footer置于页面底部的思路：将footer的父元素最小高度设置为100%，footer为绝对定位，底部0即可。

<div id="wapper">
	<div id="main-content"></div>
	<div id="footer"></div>
</div>

css：

#wapper{
	position: relative;
	height: auto;
	min-height: 100%;
}
#main-content{
	padding-bottom: 60px;  /*这里为footer预留的空间，使其不遮挡其他元素*/
}
#footer{
	position: absolute;
	bottom: 0;
	height: 60px;
}