css底部对齐

作者：﹏〃对不起╮他是为你哭了发布日期:2026-02-18 浏览:16

/* 使用 Flexbox 实现底部对齐 */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

.footer {
  background-color: #f8f9fa;
  text-align: center;
  padding: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 底部对齐示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="content">
    <!-- 页面主要内容 -->
    <p>页面内容区域</p>
  </div>
  <footer class="footer">
    <!-- 页脚内容 -->
    <p>这是底部对齐的页脚</p>
  </footer>
</body>
</html>

解释说明：

HTML 结构：页面包含两个主要部分，<div class="content"> 用于放置页面的主要内容，<footer class="footer"> 用于放置页脚内容。
CSS 样式：
- html, body 设置为 height: 100% 确保整个页面高度占满视口。
- body 使用 display: flex 和 flex-direction: column 将其子元素按列排列。
- .content 设置 flex: 1 使其占据剩余的所有空间，从而将 .footer 推到页面底部。
- .footer 设置了背景颜色、文本居中和内边距，以美化页脚。

通过这种方式，无论页面内容的高度如何变化，页脚都会始终固定在页面底部。

上一篇：css 靠右

下一篇：css设置滚动条