css sticky footer布局实现方式

什么是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元素上，否则实现不了

 

posted @ 2019-09-23 16:20  mchtig  阅读(360)  评论(0)  编辑  收藏  举报