使用固定高度
这是最直接的方法,通过指定一个确切的数值（如像素 px）来设置高度。
（图片来源网络，侵删）
语法：
div {
height: 200px; /* 设置一个固定值，例如200像素 */
}
特点：
- 简单直接：容易理解和实现。
- 不灵活超出时，可能会导致内容溢出（
overflow）或撑破容器。 - 适用场景：当你知道内容的确切高度时，例如设置一个固定的页眉、页脚或一个已知尺寸的图片容器。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">固定高度示例</title>
<style>
.fixed-height-box {
width: 300px;
height: 150px; /* 固定高度 */
background-color: lightblue;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box; /* 推荐使用，使padding不会增加总高度 */
}
</style>
</head>
<body>
<div class="fixed-height-box">
这个 div 的高度被固定为150px。
</div>
</body>
</html>
使用相对单位
使用相对于其他元素的尺寸来设置高度,这使得布局更具响应性。
（图片来源网络，侵删）
百分比 () 的高度是相对于其直接父元素的高度计算的。
重要前提：父元素必须有明确的高度定义（不能是 auto）。
语法：
.parent {
height: 400px; /* 父元素必须有高度 */
}
.child {
height: 50%; /* 子元素高度是父元素高度的50% */
}
特点：
（图片来源网络，侵删）
- 响应式：能根据父容器的大小进行缩放。
- 依赖性强：对父元素的高度有严格要求，容易造成布局嵌套的复杂性。
示例：
<div class="parent" style="height: 300px; border: 1px solid red;">
<div class="child" style="height: 50%; background-color: lightgreen;">
我的高度是父元素的一半 (150px)。
</div>
</div>
视口高度 (vh)
vh 单位表示“视口高度的1%”，视口（viewport）是浏览器窗口的可见区域。
语法：
div {
height: 50vh; /* 高度是视口窗口高度的一半 */
}
特点：
- 独立于父元素：直接与浏览器窗口关联。
- 非常适合全屏或半屏布局：例如制作一个占据整个屏幕的欢迎横幅。
- 注意：在移动设备上，浏览器工具栏的显示/隐藏会影响
vh的值，可能导致布局跳动。
示例：
<div style="height: 100vh; background-color: orange; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;"> 我占据整个视口高度 </div>
使用视口单位 (vh) 和百分比 () 的组合 (现代布局)
这是解决 100vh 在移动端有问题的常用技巧，我们可以使用 calc() 函数来计算高度。
语法：
div {
height: calc(100vh - 50px); /* 高度为视口高度减去50px */
}
特点：
- 灵活精确：可以基于视口和其他尺寸进行复杂的计算。
- 解决移动端问题：创建一个占满剩余屏幕高度的内容区域。
示例：
假设你有一个固定高度的页眉（50px），你想让内容区占满剩下的空间。
<style>
body {
margin: 0;
display: flex;
flex-direction: column; /* 让子元素垂直排列 */
}
.header {
height: 50px;
background-color: #333;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
.content {
/* 高度 = 100%的视口高度 - 50px的页眉高度 */
height: calc(100vh - 50px);
background-color: #f4f4f4;
padding: 20px;
box-sizing: border-box;
}
</style>
<body>
<div class="header">这是一个固定高度的页眉</div>
<div class="content">
<p>这个内容区域的高度会自动填充屏幕的剩余部分。</p>
</div>
</body>
使用 Flexbox 或 CSS Grid (现代布局)
这是目前最推荐、最强大的布局方法，通过设置父容器为 Flexbox 或 Grid，可以非常优雅地控制子元素的高度，而无需给子元素设置固定或百分比高度。
Flexbox
将父容器设为 display: flex，子元素（flex item）的高度可以自动拉伸以填充父容器的交叉轴空间。
语法：
.flex-container {
display: flex; /* 开启Flexbox布局 */
height: 100vh; /* 给父容器一个明确的高度 */
}
.flex-item {
flex-grow: 1; /* 这个子元素将占据所有可用的垂直空间 */
background-color: purple;
color: white;
}
特点：
- 极其灵活：可以轻松实现等高、居中、按比例分配空间等复杂布局。
- 代码简洁：减少了大量对高度的计算。
示例： 创建一个经典的两栏布局，侧边栏固定宽度，主内容区自适应高度。
<style>
.page-wrapper {
display: flex;
height: 100vh; /* 整个页面高度 */
}
.sidebar {
width: 200px;
background-color: #2c3e50;
color: white;
padding: 20px;
}
.main-content {
/* flex: 1; 是 flex-grow: 1; 的简写，表示占据所有剩余空间 */
flex: 1;
background-color: #ecf0f1;
padding: 20px;
overflow-y: auto; /* 内容超出时显示滚动条 */
}
</style>
<div class="page-wrapper">
<div class="sidebar">
<h3>侧边栏</h3>
<p>宽度固定，高度自适应。</p>
</div>
<div class="main-content">
<h2>主内容区</h2>
<p>这个区域的高度会自动拉伸，与侧边栏保持一致，填满整个屏幕，即使内容很少，它也会占据全部可用空间，如果内容很多，它会自动出现滚动条。</p>
</div>
</div>
使用 min-height 和 max-height
有时候你希望高度在一定范围内变化,这时可以使用最小和最大高度。
min-height: 设置元素的最小高度，如果内容较少，元素可以收缩到这个高度以下；如果内容较多，它会自动扩展。max-height: 设置元素的最大高度，如果内容较少，元素可以扩展；如果内容超出，它将被限制在这个高度，并可能发生溢出。
语法：
div {
/* 高度至少为200px，但如果内容很多，可以自动扩展 */
min-height: 200px;
/* 高度最多为500px，超出部分会被隐藏或出现滚动条 */
max-height: 500px;
/* 为了处理溢出内容，通常需要配合 overflow */
overflow-y: auto; /* 在垂直方向出现滚动条 */
}
特点：
- 提供弹性：防止元素被内容撑得太小，也防止它变得过大。
- 常用于表单输入框、卡片等：确保它们有一个合理的默认大小，同时又能适应不同长度的内容。
总结与最佳实践
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
固定高度 (px) |
简单、精确 | 不灵活，内容易溢出 | 已知尺寸的组件（页眉、页脚、Logo） |
| 百分比高度 () | 相对父元素响应式 | 依赖父元素高度，布局嵌套复杂 | 子元素高度与父元素成比例的布局 |
视口高度 (vh) |
独立于父元素，适合全屏 | 移动端有兼容性问题（工具栏影响） | 全屏横幅、占满视口的区块 |
calc() |
灵活，可混合单位 | 语法稍复杂，需注意浏览器兼容性 | 需要从视口高度中减去固定值时 |
| Flexbox/Grid | 极其灵活、强大、现代 | 需要学习新概念 | 几乎所有现代布局，尤其是需要等高、居中、自适应的复杂布局 |
min-height/max-height |
提供布局弹性和安全性 | 需要配合 overflow 使用 |
需要设置高度上下限的组件（如卡片、输入框） |
核心建议：
- 优先考虑 Flexbox 和 CSS Grid：对于现代网页开发，这是解决布局问题的首选方案，它们能让你从“控制单个元素尺寸”的思维，转变为“管理容器内元素关系”的思维，代码更健壮、更易于维护。
- 谨慎使用固定高度：尽量避免给内容区域设置固定高度，因为它会破坏响应式设计。
vh和calc()是很好的补充：当你需要一个元素与视口相关但又不是完全占满时，它们是完美的工具。- 始终考虑内容溢出：当你设置了高度限制时，一定要考虑内容超出怎么办，通常使用
overflow: auto;是一个友好的解决方案。
