将页脚保留在页面底部 - CSS

当我们在网站的页面中添加一个页脚时，通常情况下我们希望它能够一直保留在页面的底部。 但是，如果我们的页面内容不够多，页脚可能会出现在中间或者页面的顶部。在这种情况下，我们需要使用 CSS 让页脚保留在页面底部。

以下是一些用于将页脚保留在页面底部的 CSS 技巧。

使用 position 属性

使用 position: fixed; 属性可以让页脚保留在页面底部。但是有一个问题，如果用户滚动页面，页脚将一直处于固定位置，这就可能会遮盖网页底部的内容。所以，我们需要设置页脚的高度和 bottom 属性。

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
}

使用 flexbox

flexbox 是一个强大的布局工具，可以用来解决许多布局问题。使用 flexbox，可以将页面分成两个部分，一个是内容部分，一个是页脚，然后使用 justify-content: space-between; 属性将它们分别分配给页面的顶部和底部。

body{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content{
  flex: 1 0 auto;
}
.footer{
  flex-shrink: 0;
  height: 60px;
}

使用 grid

与 flexbox 类似，grid 也是一种简单而强大的布局工具。将页面分成两个行，一行是内容部分，另一行是页脚，使用 grid-template-rows 将它们分配给不同的行。

body{
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
}
.content{
  grid-row: 1 / span 1;
}
.footer{
  grid-row: 2 / span 1;
  height: 60px;
}

以上是三种将页脚保留在页面底部的 CSS 技巧。您可以使用其中任何一种，具体取决于您的网站设计和布局。