css让页脚保持在底部位置方法

今天小编为大家带来了关于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让页脚保持在底部位置方法的全部内容了，希望这篇文章能帮助到你，感兴趣的小伙伴记得关注一下哦。