css 底部对齐

作者：淺墨发布日期:2025-10-27 浏览:93

/* 示例代码：使用 Flexbox 实现底部对齐 */

/* HTML 结构 */
/*
<body>
  <div class="container">
    <header>Header</header>
    <main>Main Content</main>
    <footer>Footer</footer>
  </div>
</body>
*/

/* CSS 样式 */
html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少占满整个视口高度 */
}

footer {
  margin-top: auto; /* 将 footer 推到页面底部 */
}

解释说明：

min-height: 100vh;：确保 .container 至少占满整个视口的高度。
display: flex; flex-direction: column;：将 .container 设置为 Flex 容器，并沿垂直方向排列子元素。
margin-top: auto;：通过自动计算顶部外边距，将 footer 推到页面的底部。

上一篇：图片居中css

下一篇：postcss.config