sticky footer布局(粘在底部)
两种思路
第一种:
按照下面的布局,设置外层容器的width和height都为100%。
设置.wrapper的最小高度为100%
设置内容底部的padding-bottom为64px.
设置footer的margin-top为-64px.这样就相当与是footer一直贴在内容区域的最底部。
> html
<div class="container">
<div class="wrapper">
<div class="main">文字</div>
</div>
<div class="footer">X</div>
</div>
> css
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
min-height: 100%;
}
.main {
padding-bottom: 64px;
}
.footer {
margin-top: -64px;
}
第二种:
flex布局,只需要四行代码,就搞定了,但是只兼容ie10+.
> html
<div class="container">
<div class="content">
内容
</div>
<footer>
<p>© 2017 sticky footer布局 学习代码</p>
</footer>
</div>
> css
.container {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
}