新教程:css让页脚保持在底部位置的四种方案

介绍

如果你正在创建一个网页，你可能经常会想让它的页脚一直保持在最底部，无论中间的内容有多少。那么，有什么方法能快速做到么？本期我们将介绍四种css方案来解决让页脚保持在底部位置这个问题。

正文

绝对定位

  $ft-h:60px;  body {    min-height: 100vh;    position: relative;    box-sizing: border-box;    padding-bottom: $ft-h;  }  footer{    height: $ft-h;    width: 100%;    position: absolute;    bottom: 0;    left:0;  }

关键点在于让 footer 绝对定位置于最底部，而 body 则需要通过 padding-bottom 给其空出一段在 footer 高度的距离，并且 body 的高度必须是最小 100vh 代表可以占满窗口高度，而且 body 还要 设置 box-sizing: border-box; 这样不会产生高度溢出的问题。

这个虽然方案有一丢丢麻烦，但是兼容性会好些因为，核心是padding 和 absolute 这两个属性，这样很早到浏览器都可以支持到。

弹性盒子

  body {    min-height: 100vh;    display: flex;    flex-direction: column;  }  section{    flex: 1;  }

首先还是 body 使用 min-height，确保伸展到屏幕的全高。然后，设置 flex-direction: column 让其变成为堆叠的块元素并保持整个文档流可以正常显示。最后，我们只要让内容区域的变成 flex: 1 ，为了让内容区域自动填充慢整个区域。这样页脚自然而然的就到了最下面。

这个虽然方案有都比较喜欢使用，因为兼容性 flex 目前来说还是比较不错的，而且代码量也很少，相对于也比较灵活。

网格布局

  body {    min-height: 100vh;    display: grid;    grid-template-rows: auto 1fr auto;  }

对你没看错，用了网格后代码量更少了。首先依然是要让 body 撑满屏幕高度。紧接着，我们使用 grid-template-rows 来正确分隔内容。这个方法使用了小数单元计算可用空间并将其分配到多行。因此，它将填充页眉和页脚之间的所有可用空间。与上面的 弹性盒子 相似，也是让内容区域自动填充满整个区域高度，把页脚堆到最下面。

这个方案虽为简洁，但是吃亏在 grid 布局受很多手机低版本的浏览器限制，但是展望网格布局应该以后会是开发者最喜欢的方案。

calc计算

  section{    min-height: calc(100vh - 60px - 60px);  }

现在代码更少了，只需要一句话就能做到了。众所周知，calc() 此CSS函数是允许在声明 CSS 属性值时执行一些计算的方法。我们只要是让内容区域的最小高度，是全屏高度然后去掉 header 和 footer 的高度，这就大功告成啦~

这个方案最简洁，但是有两个问题比较突出，就是以后如果在增加一些块和更改布局时会稍微麻烦一点都要预先知道块的高度，其次也是在手机低版本的兼容上，有时候也是不尽人意。

结语

其实与其说本期讲的是让页脚保证在底部，更不如说是css基础布局的实战练习，在我们开发中，各种状况都有可能出现，最后那种方案好与不好依然是要根据当前业务场景去灵活运用的。

好了，以上就是新教程:css让页脚保持在底部位置的四种方案相关的全部内容，希望对您有帮助！