极客笔记CSS 高度100%(百分比高度)
1. 引言
在网页设计中，使用CSS（层叠样式表）可以控制网页的布局和样式。其中，设置元素的高度是一个常见的需求。本文将详细介绍CSS中设置高度为100%的方法，特别是百分比高度的应用。
2. CSS高度单位
在CSS中，设置元素的高度时有多种单位可供选择。常见的高度单位包括像素（px）、百分比（%）、视窗高度（vh）等。本文主要关注百分比单位，因为百分比高度能够实现适应不同屏幕大小的自适应布局。
3. 父元素高度未定义情况下的百分比高度
对于一个元素来说，如果其父元素的高度未定义，则无法设置百分比高度。这是因为百分比高度是相对于其包含块的高度而言的。
举个例子，假设有以下HTML代码：
<div class="parent">
<div class="child"></div>
</div>
若未对.parent定义高度，则.child无法通过百分比设置高度：
.child {
height: 100%; /* 无效 */
}
此时，.child元素的高度不会生效，为了解决这个问题，可以给.parent元素添加一个固定的高度或者使用其他CSS属性来确定父元素的高度。
4. 确定父元素高度的方法
4.1 使用固定高度
最直观的方法是给父元素设置一个固定的高度值。例如，设置.parent元素的高度为500像素：
.parent {
height: 500px;
}
然后，.child元素就可以使用百分比高度了：
.child {
height: 100%;
}
4.2 使用绝对定位
另一种确定父元素高度的方法是使用绝对定位。通过将父元素的position属性设置为relative或者absolute，可以使子元素相对于父元素进行定位。
举个例子，假设有以下HTML代码：
<div class="parent">
<div class="child"></div>
</div>
给.parent元素设置绝对定位：
.parent {
position: relative;
}
然后，.child元素就可以使用百分比高度了：
.child {
height: 100%;
}
这是因为绝对定位会创建一个新的定位上下文，在该上下文中，子元素的百分比高度将相对于最近的已定位祖先元素（即父元素）。
4.3 使用Flexbox布局
使用Flexbox布局也是一种常见的方法，可以轻松实现父元素的高度自适应。
举个例子，假设有以下HTML代码：
<div class="parent">
<div class="child"></div>
</div>
通过设置.parent元素的display属性为flex，可以使其成为一个Flex容器：
.parent {
display: flex;
}
然后，.child元素就可以使用百分比高度了：
.child {
height: 100%;
}
这是因为Flex容器会按照一定的规则将可用空间分配给子元素，实现自适应布局。
5. 百分比高度的应用场景
5.1 等高布局
使用百分比高度可以实现等高布局，即让多个元素的高度相等。例如，假设有以下HTML代码：
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
通过设置.container元素为Flex容器，并将.box元素的高度设置为100%，可以实现等高布局：
.container {
display: flex;
}
.box {
height: 100%;
}
这样，不管.box元素内部的内容有多少，它们的高度都会自适应为最高的那个元素。
5.2 自适应布局
使用百分比高度可以实现自适应布局，使元素的高度随着屏幕大小的变化而变化。例如，假设有以下HTML代码：
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
通过设置.container元素为Flex容器，并将.sidebar和.content元素的高度设置为50%，可以实现自适应布局：
.container {
display: flex;
}
.sidebar,
.content {
height: 50%;
}
这样，.sidebar和.content元素的高度将自动调整为屏幕高度的50%。
6. 总结
本文详细介绍了CSS中设置高度为100%的方法，特别是百分比高度的应用。通过确定父元素的高度，可以实现子元素的百分比高度。我们讨论了使用固定高度、绝对定位和Flexbox布局三种方法来确定父元素的高度，并给出了相应的代码示例。百分比高度的应用场景包括等高布局和自适应布局，可以使网页在不同屏幕大小下都获得良好的显示效果。