sticky footer绝对底部的2种实现方法

Posted 2021-01-01 i-leo

sticky footer绝对底部：当页面内容小于屏幕高度时，底部模块固定显示在屏幕底部；当页面内容大于屏幕高度时，底部模块会被推到内容底部，拖动滚动条才能显示。

1、min-height

页面结构为：

1 <div class="minHeight">
2     <div class="wrapper">
3         <div class="content">
4             <p>内容</p>
5         </div>
6     </div>
7     <div class="footer">底部模块</div>
8 </div>

样式：设置wrapper最小高度为屏幕高度，footer设置负的上边距固定在底部，当内容较长时，可能会向下与footer产生混叠，因此必须设置content的下padding，保证不重合。

<style type="text/css">
    .wrapper{
        min-height: 100%;
    }
   .content{
       padding-bottom: 50px;
   }
   .footer{
      position: relative;
      margin-top: -50px;
   }
</style>

2、flex布局

1 <div class="box">
2     <div class="content">
3         <p>内容</p>
4     </div>
5     <div class="footer">底部模块</div>
6 </div>

1 <style type="text/css">
2     .box{
3         display: flex;
4         flex-direction: column;  
5     }
6     .content{flex:1}
7 </style>