前段时间修复了一个bug,筛选试错了好多种方式,最终用到粘连布局解决了问题。查询资料时发现,网上关于几种布局的实现方式比较杂乱,故将前端常用的几种布局方式整理一下,以备后续参考使用。
1. 粘连布局
粘连布局是指,当页面的main元素内容较长时(超出屏幕高度),footer紧跟在内容后面;当页面的main元素内容较短时,footer能够粘连在屏幕底部。
HTML部分:
<div id="wrap">
<div class="main">
<div>mian</div>
</div>
</div>
<div id="footer">footer</div>
CSS部分:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
background: red;
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer {
height: 50px;
line-height: 50px;
background: burlywood;
text-align: center;
margin-top: -50px;
}
需要注意的是,footer必须是一个独立的结构,与wrap没有任何嵌套关系