需要實現以下效果：
- 子元素高度小於窗口高度時，父元素高度為窗口高度；
- 子元素高度大於窗口高度時，父元素高度自適應，由子元素高度決定。
可以這樣實現：
- 依據DOM結構逐層設置目標元素的所有父元素
height="100%"，直至根元素html，瀏覽器在渲染過程中會將窗口的實際高度值傳遞給html元素，然后再根據DOM結構逐層傳遞，由於height值不能繼承，height="100%"也不能隔代傳遞，因此必須 逐層設置，此步驟中的height不能用min-height代替，因為min-height值無法向下傳遞。 - 設置目標元素
min-height="100%"，使目標元素的最小高度為窗口高度，當內容高度超過窗口高度時，目標元素高度則由內容高度確定，從而實現了高度自適應。此步驟中的min-height不能用height代替，否則當內容高度超過窗口高度時，會出現內容溢出。如圖：
DOM：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>try</title>
<link rel="stylesheet" href="try.css">
</head>
<body>
<div id="outer">
<div id="inner">
<p>文本高度可自行調整</p>
</div>
</main>
</body>
</html>
CSS：
html {
height: 100%;
}
body {
height: 100%;
}
#outer {
height: 100%;
}
#inner {
height: 100%;
}
p {
width: 300px;
min-height: 100%;
background-color: aqua;
}