css实现footer底部自粘

最新推荐文章于 2024-01-18 14:46:19 发布

原创最新推荐文章于 2024-01-18 14:46:19 发布 · 995 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#界面 #浏览器 #html #css

css小结专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了在CSS中实现底部footer始终保持在页面底部的六种方法，包括适用于内容较少的情况、通过增加内部div调整底部padding、使用calc()计算内容高度以及使用flexbox和grid布局。在不同场景下，开发者可以根据需要选择合适的方法。

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

写界面时几乎每一个界面都会有顶部、中间内容、底部三个部分。
在写底部时，我们总是需要底部总是在最底下的部分。我常常会出现这样的情况：

把一个个盒子按顺序写下去并所写的界面的顶部还有内容部分已经占满了整个页面，所以会很自然的把footer的盒子直接放在前面的盒子后面。

当前面内容的盒子足够大，足以撑开元素到浏览器底部时，紧跟在后面的footer盒子也会排在其后不用做任何处理就实现了footer在底部的操作。如下图左所示
当前面内容盒子不足以撑起到浏览器底部，如下图右所示，footer的下面大量留白。也就不能起到保持在最底部的作用了。

解决方法

在通过百度后，普遍找到了在css中加入position:absolute; bottom:0;的方法。在测试后发现这个方法在页面有留白的时候是非常好用的。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

          *{
            margin: 0;
            padding: 0;
          }

         .header{
            background: yellow;
            width: 100%;
            height: 100px;
         }

         .content{
            background:orange;
            width:100%;
            height:800px;
         }

         .footer{
            background:gold;
            width:100%;
            height:100px;
            position: absolute;
            bottom: 0;
         }
    </style>

</head>


<body>
       <div class="header">
            <h1> header</h1>
       </div>

       <div  class="content">
              <h1>内容</h1>
       </div>

       <div class="footer">
             <h1>footer</h1>
       </div>


</body>
</html>

+absolute bottom

从上图左看出。当出现内容盒子不足以占满整个可视区域时。确实是能够使footer始终保持在界面的最底部，即使窗口变大或变小也不会动摇footer的最底部位置。
但随之而来也有一个小问题，当content部分的内容多于页面所能展示内容时，就会发生上图右的情况。content的内容在鼠标未下滑时和图左的显示一样，但是拖到后面的时候却发现，footer硬生生的把content隔开，并遮住了这一部分的内容。
- 产生这个问题的原因主要还是归咎于absolute的定位问题。
  这个网址非常清晰向我们解释了，position:absolute 中父元素的相关问题。position相对于祖先元素的定位

在设置position:absolute 时，前面没有人为地设置祖先元素。如果没有这样的祖先元素，则以初始包含块进行定位，而初始包含块并不是以或进行定位的。

对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。

position:absolute; bottom:0;的时候也就相当于把footer绝对定位在了获得的视口的底部。这也就是为什么footer会保持在窗口底部，并且在滚动鼠标看后面内容时，footer被固定和漂浮在内容上方的原因了。

以下来自于footer自粘五种方法+我的测试与总结

2.内容部分增加一个`min-height:100%`

HTML代码

 <div class="header">
            <h1> header</h1>
       </div>

       <div  class="content">
              <h1>内容</h1>

               <div class="push"></div>
       </div>

       <div class="footer">
             <h1>footer</h1>
       </div>

css代码

<style type="text/css">
         *{
            margin: 0;
            padding: 0;
          }

          html,body{
            /*
             *重要部分添加，要给body和HTML初始为100%
             *只有这样在后面用到min-height时才能让content部分盒子足以撑大到浏览器底部。*/
            height:100%;
          }

         .header{
            background: yellow;
            width: 100%;
            height: 100px;
         }

         .content{
            background:orange;
            width:100%;
            /*增加一个min-height，使其大小为100%，即与body同高。*/
            min-height: 100%;
            *height:800px;
         }
         .push,
         .footer{
            *background:gold;
            opacity: 0.5;
            width:100%;
            height:100px;
         }
</style>

代码效果：

①body、html的height设置为100%，与视口同高；
②在footer前面定义一个大盒子包裹全部内容，并在大盒子中设置css的min-height为100%，保证足以撑到容器底部。
③在大盒子的底部增加一个类名为push的div，避免覆盖footer的内容。

缺点：
①我们常常需要的底部一般是版权信息，页面内容较少时自然是希望保持在视口的底部。但是因为光是content内容就占满了整个视口，所以footer则必须滚动条下拉才能看到底部内容。
这里写图片描述
②撑破容器了body还有html，可能会对其他的内容产生影响。

3.增加一个内部div(inner-content)使得bottom-padding=(footer)height

html代码

<div class="header">
            <h1> header</h1>
       </div>

       <div  class="content">
          /*增加的inner-content*/
              <div class="inner-content">
                    <h1>内容</h1>
              </div>
       </div>

       <div class="footer">
             <h1>footer</h1>
       </div>

<style type="text/css">
          html,body{
            height:100%;
          }
        /*
         * content保持不变
         */
         .content{
            /*增加一个min-height*/
            min-height: 100%;
         }

         .inner-content{
             background:green;
            opacity:0.2;
            padding: 20px;
            padding-bottom: 100px;
         }
         .footer{
             height:100px;
             margin-top: -100px;
         }
</style>

演示效果：

①优化了方法2，使得内容较少的时候不用翻页去看footer
②删去了方法2中的.push盒子，取而代之的是包裹内容的一个inner-content与footer高度相等的padding-bottom，避免footer覆盖内容。

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

这是我现在常在使用的方法。
html

<div  class="content">                  
      <h1>content</h1>
 </div>

 <div class="footer">
     <h1>footer</h1>
 </div>

css代码

<style type="text/css">
          html,body{
            height:100%;
          }
         .content{
            /*min-height从100%变成calc(100vh - 70px)*/
            min-height: calc(100vh - 1.00px);
         }

         .inner-content{
             background:green;
            opacity:0.2;
            padding: 20px;
            padding-bottom: 100px;
         }

         .footer{
             height:100px;
         }
</style>