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

Posted i-leo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sticky footer绝对底部的2种实现方法相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于sticky footer绝对底部的2种实现方法的主要内容,如果未能解决你的问题,请参考以下文章

Sticky Footer的实现

底部粘连(stiky footer)布局

Sticky footer实现

sticky-footer的三种解决方案

sticky footer布局,定位底部footer

CSS Sticky Footer 实现的问题