CSS固定底部写法

写在前面

如果本文对您有所帮助，就请点个关注吧！

一、问题描述

本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图：

sticky-footer.png

二、解决方案

1. Flex1

解决思路

首先将html和body元素的高度设置为100%，然后在body添加一个div作为容器，并将其高度设置为100%，设置display:flex;flex-direction: column;，利用justify-content: space-between;在内部设置两个div，上面与下面，即可实现底部固定，注意要设置底部元素的flex属性为不可放缩，否则会被压缩。

源代码

  
  


  

    

      
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
    
    

  

2.Flex2

解决思路

同样设置父元素display: flex;flex-direction: column;,然后将上面的元素的设置为flex: 1;,使其高度不足时自动补全，同样要设置底部元素不可放缩，否则会被压缩。

源代码

  
  


  

    

      
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
      
测试文本
    
    

  

3.margin与padding

解决思路

底部元素增加负值上边距

源代码

  
  


  

    

      
      
测试内容
      
测试内容
      
测试内容
      
测试内容
      
测试内容
    
  
  

4. calc()（推荐，使用的dom最少）

解决思路

使用calc()计算内容的高度

源代码

  
  


  

    
    
测试内容
    
测试内容
    
测试内容
    
测试内容
    
测试内容