首页 > 代码库 > Sticky footer实现

Sticky footer实现

2024-09-06 05:56:52   217人阅读

常有这样的需求，比如将footer“固定”在底部，如果内容区没有占满整个屏幕，footer固定在底部，若内容区超过屏幕，则footer处于内容区的尾部。总之就是内容铺不满，footer固定在窗口底部，若内容能铺满，则处于内容区下面。

HTML结构：

<body>
  <div class="container">    
    <div class="main">  
　　 balabalbalabla              
    </div>
   </div>
   <div class="footer">Footer</div>
</body>

CSS部分，有两种方法，

1. footer固定高度，container设置最小高度。

* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%;                                    
}
.container {
    min-height: calc(100vh - 80px);
}
.footer {
    height: 80px;
    background-color: grey;
}

2. footer固定高度，main设置padding-bottom等于footer的高度，然后footer设置margin-top为footer的高度。

* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%;                                    
}
.container {
    min-height: 100%;    
}        
.main {
    padding-bottom: 80px;
}
.footer {                    
    background-color: grey;
    margin-top: -80px;            
    height: 80px;                
}

个人喜欢第二种方法，calc方法比较耗性能。

 

Sticky footer实现


联系
我们