什么是css sticky footer
我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时,页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。是不是很容易理解。
方法一:使用负margin方式实现
html代码
1 <div class="wrapper clearfix"> 2 <header class="header"> 3 头部内容 4 </header> 5 <div class="mian"> 6 <div class="main-content"></div> 7 </div> 8 <footer class="footer"> 9 底部内容 10 </footer> 11 </div>
css样式
1 .wrapper{ 2 position: fixed; 3 width: 100%; 4 height: 100%; 5 background: rgba(7,17,27,0.8); 6 z-index: 100; 7 left: 0; 8 top: 0; 9 overflow: auto; 10 color: #fff; 11 } 12 .clearfix::after{ 13 display: table 14 content: "" 15 clear: both 16 } 17 .main{ 18 display: inline-block; 19 min-height: 100%; 20 width: 100%; 21 } 22 .main-content{ 23 margin-top: 64px; 24 padding-bottom: 64px; 25 } 26 .footer{ 27 position: relative; 28 clear: both; 29 font-size: 32px; 30 color: rgba(255,255,255,0.5); 31 margin: -64px auto 0px; 32 width: 32px; 33 height: 32px; 34 }
方法二:使用flex布局方式实现
css代码
1 body{ 2 display: flex; 3 flex-flow: column; 4 min-height: 100vh; 5 overflow: auto; 6 } 7 .main{ 8 flex: 1; 9 }
注:此种方式实现css sticky footer虽然布局简单,但是其display属性必须设置在body元素上,否则实现不了