CSS实现固定底部footer的代码

最新推荐文章于 2023-12-26 23:47:51 发布

前端独秀

最新推荐文章于 2023-12-26 23:47:51 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=jja2kcb0j&title=CSS%E5%AE%9E%E7%8E%B0%E5%9B%BA%E5%AE%9A%E5%BA%95%E9%83%A8footer%E7%9A%84%E4%BB%A3%E7%A0%81

版权

前端专栏收录该内容

493 篇文章

订阅专栏

当文章内容没填满时，网站底部footer上移，这是很多客户不能接受的。
使用css解决办法如下：

 
       <style type= 
       "text/css" 
       > 
      
 
       html, body, #wrap { 
       height 
       :  
       100% 
       ;} 
      
 
       body > #wrap { 
       height 
       :  
       auto 
       ;  
       min-height 
       :  
       100% 
       ;} 
      
 
       #main { 
       padding-bottom 
       :  
       50px 
       ;}   
       /* 必须使用和footer相同的高度 */ 
      
 
       #footer { 
      
 
       position 
       :  
       relative 
       ; 
      
 
         
       margin-top 
       :  
       -50px 
       ;  
       /* footer高度的负值 */ 
      
 
         
       height 
       : 
       50px 
       ; 
      
 
         
       clear 
       : 
       both 
       ; 
      
 
         
       background 
       : 
       red 
       ; 
      
 
         
       } 
      
 
         
       .clearfix:after { 
      
 
         
       content 
       :  
       "." 
       ; 
      
 
         
       display 
       :  
       block 
       ; 
      
 
         
       height 
       :  
       0 
       ; 
      
 
         
       clear 
       :  
       both 
       ; 
      
 
         
       visibility 
       :  
       hidden 
       ; 
      
 
         
       } 
      
 
       .clearfix { 
       display 
       : inline- 
       block 
       ;} 
      
 
       * html .clearfix {  
       height 
       :  
       1% 
       ;} 
      
 
       .clearfix { 
       display 
       :  
       block 
       ;} 
      
 
         
       </style> 
      

</head>
<body>
<div id="wrap">
   
   <div id="main" class="clearfix">
     <div id="content" style="min-height:600px;height:auto">
      <li>这是内容 http://www.hello-code.com</li>
      <li>这是内容 http://www.hello-code.com</li>
      说明：#main的padding值、footer的高度和负margin值一致
     </div>
     <div id="side">
     </div>
  </div>
</div>
<div id="footer">
    </div>
</body>
</html>

看到了没，如此解决不再让你的footer悬停空中:

还有一个小技巧就是让div默认高度，当内容过长时就自动加长：
min-height:200px;　height:auto;