html footer 固定

最新推荐文章于 2021-06-25 15:54:22 发布

转载最新推荐文章于 2021-06-25 15:54:22 发布 · 602 阅读

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了两种实现网页底部固定页脚的方法：一种是通过绝对定位使页脚随滚动条滚动，另一种是使用固定定位确保页脚始终保持在浏览器窗口底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让footer始终位于页面的最底部

html代码：

    
    <
    div 
    class
    ="container"
    >
    
    <
    div 
    cass
    ="header"
    ></
    div
    >
   
    <
    div 
    class
    ="body"
    ></
    div
    >
    
    <
    div 
    class
    ="footer"
    ></
    div
    >
    
    </
    div
    >

第一种情况：footer随着滚动条的滚动而滚动

 
   .container{
   position:
   relative;width:100%;min-height:100%;}
   
 .body{
   padding-bottom:
   50px;}
   
 .footer{
   height:
   50px;
   position:
   absolute;
   bottom:
   0px;
   left:
   0px;}
  

第二种情况:footer始终在其底部固定

    .container{position:relative;width:100%;min-height:100%;}
   

    .body{
    padding-bottom:
    50px;}
    
 .footer{
    height:
    50px;
    position:
    fixed;
    bottom:
    0px;
    left:
    0px;}
   