sticky footer——粘黏页脚，你知道多少？

最新推荐文章于 2023-06-07 16:20:04 发布

Bumphy

最新推荐文章于 2023-06-07 16:20:04 发布

阅读量577

点赞数

分类专栏：前端 HTML CSS布局文章标签： css布局 sticky footer 前端页脚置底

本文链接：https://blog.csdn.net/Bumphy/article/details/80161097

版权

前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

CSS布局

4 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

作为一名前端coder，如果有人问你什么是sticky footer时，你一脸懵逼的样子，可是要被鄙视的哟……

其实，在日常开发中，你一定遇见过这样的布局，只是不知道它的名字罢了。当然，知道这个英文，偶尔也是不错的呢！

sticky footer 指的是在页面布局时，当页面的内容不足或等于一屏时，让页脚始终保持在页面的底部，如同粘在底部一样(^-^)；当页面的内容超过一屏时，即页面发生滚动时，页脚跟随文档，仍然处在页面文档的底部。

简而言之，就是“页脚置底”。

二、基本布局

HTML部分

<div class="content">这是页面的主体部分</div>
<div class="footer">这是页脚</footer>

CSS部分

.content{
    background-color: #f5f5f5;
}
.footer{
    background-color: #00ffff;
}

三、具体实现

（1）设置负外边距

设置负的外边距有两种实现方案：

1.将内容部分的底部外边距设为负数

把内容部分最小高度设为100%，再设置内容部分的负底部外边距值

<body>
  <div class="wrapper">
      content
    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* 等于footer的高度 */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

这个方法需要容器里有额外的占位元素（如.push）

需要注意的是.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不太友好。

2.将页脚的顶部外边距设为负数

给内容外增加父元素，并让内容部分的底部内边距与页脚高度的值相等。

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

问题：不过这种方法和上一种一样，都需要额外添加不必要的html元素。

（2）给内容部分设置最小高度

.content{
    min-height: calc(100vh-footer的高度);
    box-sizing:border-box;
}

该方法：当页脚的高度不定时，这种方法就显得有点不灵活了；

（3）弹性盒布局

footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
 }
.content {
    flex: 1; 
}
.footer{
    flex: 0;      
}

该方法：弹性盒布局，如果对兼容性要求不高，比较推荐。

（4）在`.content` 元素的外面添加一个父容器`.wrapper`；

HTML部分

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

CSS部分

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 200px; /* 和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -200px; /* footer高度的负值 */
    height: 200px;
    clear:both;
}

另外，为了保证兼容性，需要在.wrapper上添加.clearfix类；

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>

CSS部分

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

该方法：这种负margin的布局方式，是兼容性最佳的布局方案，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，结构相对较复杂，代码较多；

（5）使用grid布局

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}