如何让footer始终在页面底部的方法

Posted 2023-05-18

参考技术A 用简单的CSS实现将FOOTER固定在页面底部,我们通常布局的时候都是头部，内容区域，还有底部，一般都是使用三个div，然后id分别设置为header，content，footer，然后在定义每个div的高度，一般来说，header，footer都是公共的，因为高度，内容一般... 参考技术B footerposition:fixed; bottom:0;

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>