页面底部粘贴布局：用 CSS 实现的 3 种方法

Sticky footer 是 Web 设计中一种实用的布局技术，可确保网页底部始终固定在可视区域的底部，无论内容长度如何。本文将探讨使用 CSS 实现 Sticky footer 布局的 3 种方法，让你的网页设计更加美观和用户友好。

1. Flexbox

Flexbox 提供了一种灵活且强大的方式来实现 Sticky footer 布局。其主要思想是将父容器设置为 flex 布局，然后将子元素设置为 flex 项目。父容器的高度设置为 100vh，子元素的高度设置为 auto。

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

#content {
  flex: 1 0 auto;
}

#footer {
  flex: 0 0 auto;
}

2. Grid

Grid 布局也是一种实现 Sticky footer 布局的强大方法。它提供了更精细的控制，并允许你指定网格中元素的位置和大小。在这种方法中，父容器被设置为网格容器，内容被分配到网格区域，页脚被固定在底部。

body {
  display: grid;
  grid-template-rows: 1fr auto;
}

#content {
  grid-row: 1;
}

#footer {
  grid-row: 2;
}

3. Position

Position 属性提供了另一种实现 Sticky footer 布局的方法。这种方法简单明了，但灵活性较低。它涉及将父容器设置为相对位置，并将页脚设置为绝对位置，然后将其底部定位到父容器的底部。

body {
  position: relative;
  height: 100vh;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

结论

通过使用 Flexbox、Grid 或 Position，你可以轻松地在 Web 页面中实现 Sticky footer 布局。这些方法易于理解和实施，可以确保页脚始终固定在浏览器窗口的底部，无论内容长度如何。这将改善用户体验，并使你的网页设计更具美观性和响应性。