css中怎么让页脚到底部去

当我们需要将页脚放在页面的底部时，通常会遇到一些困难。这是因为在许多情况下，页面的内容不足以铺满整个屏幕，从而导致页脚漂浮在页面上方。幸运的是，我们可以使用 CSS 中的一些技巧来解决这个问题。

首先，我们可以使用定位属性将页脚粘贴到页面底部。将页脚的位置设置为 absolute，bottom 的值为 0，就可以将页脚定位到页面底部。以下是相应的 CSS 代码：

footer {
  position: absolute;
  bottom: 0;
} 

但是，这种方法可能会导致一些问题。例如，如果页面的内容不足以铺满整个屏幕，页脚将会漂浮在中间，而不是在页面底部。为了避免这种情况，我们可以考虑使用另一种方法。

第二种方法是使用 Flexbox。我们可以将整个页面视为一个 Flexbox 容器，将 body 元素设置为 Flexbox 容器，然后将页脚放在最后一个 Flexbox 项目中。以下是相应的 CSS 代码：

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

main {
  flex: 1;
}

footer {
  flex-shrink: 0;
} 

在上述代码中，我们将 body 元素设置为 Flexbox 容器，并将其 flex-direction 属性设置为 column。这使得整个页面的布局垂直排列。我们还将 body 元素的 min-height 属性设置为 100vh，以确保它填满整个可视区域。

我们还将 main 元素设置为 Flexbox 项目，并将其 flex 属性设置为 1。这允许它充满自己的容器。最后，我们将 footer 元素设置为最后一个 Flexbox 项目，并将其 flex-shrink 属性设置为 0。这意味着 Flexbox 不会缩小该项目的大小，而是允许它充满剩余的空间。

我们使用 CSS 中的这些技巧可以让页脚放在页面底部，无论页面的内容多少。