在開發(fā)網(wǎng)頁的過程中，常常需要把某一個元素的高度撐滿整個屏幕或者父容器。為了實現(xiàn)這個效果，我們可以使用CSS來設(shè)置該元素的高度為100%，但這并不總是奏效。那么接下來，我將分享一些有關(guān)于如何讓元素的高度撐滿的技巧。

首先，讓我們來看一下設(shè)置高度為100%并不能總是奏效的原因。如果一個元素的父容器沒有明確指定其高度，那么該元素的高度將會和其父容器一樣。如果父容器的高度沒有被設(shè)置為100%，那么我們把子元素的高度設(shè)置成100%就沒有任何用處。

<div class="parent">
<div class="child">Hello World!</div>
</div>
.parent{
height: auto; /* 如果沒有明確指定高度，容器的高度就是由內(nèi)容撐開的 */
}
.child{
height: 100%; /* 這段代碼并不會起到撐滿整個屏幕的作用 */
}

為了解決這個問題，我們需要給父容器設(shè)置一個明確的高度。如果是對于整個屏幕來說，那么父容器就應(yīng)該是和元素。在這種情況下，我們可以使用：vh和vmin單位來指定容器的高度。

html, body{
height: 100%;
}
.parent{
height: 100vh; /* 容器的高度為整個屏幕的高度 */
}
.child{
height: 100%; /* 這樣就可以讓子元素的高度撐滿整個屏幕了 */
}

除了使用vh和vmin單位外，我們還可以使用父容器的position屬性（如果父容器沒有定位，則可以加上position:relative;）。通過設(shè)置position屬性為relative或者absolute，并將其父容器的高度設(shè)置為100%，我們就可以讓子元素?fù)螡M整個容器的高度。

.parent{
position: relative; /* 一定要考慮給父容器加上相對于定位 */
height: 100%;
}
.child{
position: absolute;
top: 0; /* 為了占據(jù)整個容器的高度 */
bottom: 0;
height: 100%;
}

當(dāng)然，還有很多其他的實現(xiàn)方式，但這里的技巧足以讓你的元素?fù)螡M整個容器/屏幕的高度。