css 100%高度全屏自适应网页布局

封面图 • 2025-09-16 • Html/Css

要实现一个高度为100%的全屏自适应网页布局，可以通过以下方法来完成。以下是详细的 CSS 和 HTML 示例代码：

### HTML 结构：
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>100% 高度全屏布局</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>头部</header>
        <main>主要内容区域</main>
        <footer>页脚</footer>
    </div>
</body>
</html>
```

### CSS 样式 (styles.css)：
```css
/* 设置全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; /* 确保 html 和 body 的高度是 100% */
    width: 100%;
}

body {
    display: flex;
    flex-direction: column; /* 使用 flexbox 布局 */
}

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

header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

main {
    flex: 1; /* 主内容区域占据剩余空间 */
    background-color: #f4f4f4;
    padding: 2rem;
    text-align: center;
}
```

### 解释：
1. **HTML 结构**：我们使用了一个简单的 `container` 容器，包含 `header`, `main`, 和 `footer`。
   
2. **CSS 样式**：
   - `html` 和 `body` 的高度设置为 `100%`，以确保整个页面的高度可以扩展到视口的高度。
   - 使用 `flexbox` 布局，让 `container` 的高度至少为视口高度（通过 `min-height: 100vh`）。
   - `main` 区域使用了 `flex: 1`，这样它会自动占据剩余的空间。

### 效果：
- 页面会根据视口的高度自动调整，无论窗口大小如何变化，整个布局都会保持全屏效果。
- 头部和页脚的高度固定，而主要内容区域会根据窗口大小动态调整高度。