BFE.devAI解答 - CSS 问题
20. sticky footer

To create a sticky footer, we can use flexbox. Here's an example:

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

.body {
  flex: 1;
}

.footer {
  margin-top: auto;
}

Explanation of above code:

• display: flex on the container makes it a flex container.
• flex-direction: column makes the flex items stack vertically.
• min-height: 100vh sets the minimum height of the container to the viewport height, ensuring that it fills the screen even if there's not enough content.
• flex: 1 on the body makes it grow to fill the available space.
• margin-top: auto on the footer gives it a top margin that pushes it to the bottom of the container.

With this code, if the content is short, the footer will be at the bottom of the screen. If the content is tall, the footer will be after it as normal.