CSS height 的單位有什麼差別?

要讓height可以有效果,height的設定必須是絕對單位(px, rem…)。例如:

1
2
3
div {
height: 300px;
}

但是只是設定%的話,會看起來沒效果,原因是%是一個相對單位(相對於父層的幾%)

1
2
3
div {
height: 30%;
}

也因為%不是一個絕對單位,所以如果父層沒有指定高度的話,就等於高度沒有設定,即是 0 的不管幾 %,都是 0 。

有一個例外是<html>是可以設定%的。當<html>設定height為 100% 的時候,代表<html>是視窗高度的 100% 。

1
2
3
html {
height: 100%;
}

所以如果要讓高度是「視窗高度的幾 % 」的話,就要先把父層都先定義好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>

<head>
<style>
html,
body {
height: 100%;
}

div {
height: 30%;
}
</style>
</head>

<body>
<div></div>
</body>

</html>

另外,有一個跟「視窗高度的幾 % 」一樣效果的絕對單位,不需設定父層的高度,直接這樣設定就好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>

<head>
<style>
div {
height: 30vh;
}
</style>
</head>

<body>
<div></div>
</body>

</html>