css 中 stick footer 布局实现
做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮。stick footer 就是让 footer 元素固定在底部
- 当内容不足满屏时,footer 紧贴最底部
- 满屏需要下拉时,footer 就在内容的底部
以下主要用一种固定的结构实现 stick footer , 俗称套路, 看以下html结构:
<div id="wrap">
<div id="main" class="clearfix">
<div id="content"></div>
<div id="side"></div>
</div>
</div>
<div id="footer"></div>
css样式:
#wrap {
height: auto; min-height: 100%;
}
#main {
/* 必须使用和footer相同的高度 */
padding-bottom: 150px;
}
#footer {
position: relative;
/* footer高度的负值 */
margin-top: -150px;
height: 150px;
clear:both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
本文版权归作者和博客园共有,欢迎转载。但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利!
作者:刘呵呵
QQ:352887191