<div id="content-wrapper clearfix">
<div id="content-main">这里是内容</div>
</div>
<div id="footer">这里是需要固定到底部的元素</div>
.clearfix {
display: inline-block
}
.clearfix:after {
display: block;
content: ".";
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
#content-wrapper {
min-height: 100%;
}
#content-main {
margin-top: 64px; //子元素设置的margin会对父级块元素产生影响(针对上下外边距),父元素设置成inline-block即可
padding-bottom: 64px; //撑开父级元素,这里是底部元素放的位置
}
#footer {
position: relative;
width: 32px;
height: 32px;
margin: -64px auto 0 auto //设置负的margin向上移动至main预留位置,并居中显示。
clear: both;
font-size: 32px;
}
此方法兼容性较好,除此之外还有一些其他的方法,感兴趣的可以戳这里:
http://www.w3cplus.com/css3/css-secrets/sticky-footers.html