css底部版权永远占据底部页⾯的⽅法
有的时候页⾯内容不够撑起⼀个屏幕的时候，就会看起来很难看。
⽅式⼀
html
<div class="wrapper clearfix">
<div class="content">
// 这⾥是页⾯内容
</div>
</div>
<div class="footer">
// 这⾥是footer的内容
</div>
css
.wrapper {
min-height: 100%;
}
.wrapper .content{
padding-bottom: 50px; /* footer区块的⾼度 */
}
.footer {
position: relative;
margin-top: -50px;  /* 使footer区块正好处于content的padding-bottom位置 */
height: 50px;
clear: both;html的flex布局
}
.clearfix::after {
display: block;
content: ".";
height: 0;
clear: both;
visibility: hidden;
}
注意:content元素的padding-bottom、footer元素的⾼度以及footer元素的margin-top值必须要保持⼀致。
这种负margin的布局⽅式，是兼容性最佳的布局⽅案，各⼤浏览器均可完美兼容，适合各种场景，但使⽤这种⽅式的前提是必须要知道footer元素的⾼度，且结构相对较复杂。
flex布局⽅式
html代码：
<div class="wrapper">
<div class="content">这⾥是主要内容</div>
<div class="footer">这是页脚区块</div>
</div>
css代码：
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
flex: 0;
}
这种布局⽅式结构简单，代码量少，也是较为推荐的布局⽅式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。