CSS3是現(xiàn)代Web設(shè)計(jì)中最常用的基礎(chǔ)技術(shù)之一。相較于CSS2，CSS3提供了更多的樣式和效果，其中一個(gè)特性就是高度單位中的“vh”。

height: 100vh;

在CSS3中，“vh”是指相對于視口高度的百分比，即1vh等于視口高度的1%。

這個(gè)特性的應(yīng)用場景很多，比如在響應(yīng)式設(shè)計(jì)中，使用vh來設(shè)置一個(gè)元素的高度可以確保在不同設(shè)備上顯示時(shí)，該元素的高度始終保持視口高度的百分比。例如：

.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

以上代碼將設(shè)置一個(gè)容器，使其高度等于視口高度，并使其內(nèi)部元素水平居中和垂直居中。這種用法常常出現(xiàn)在全屏背景圖或是全屏幻燈片banner的設(shè)計(jì)中。

除了單獨(dú)使用vh來設(shè)置高度外，vh也可以與其他單位一起使用。例如：

.container {
height: calc(100vh - 40px);
padding-top: 20px;
padding-bottom: 20px;
}

以上代碼將設(shè)置一個(gè)容器，使其高度等于視口高度減去40像素，并設(shè)置上下各20像素的內(nèi)邊距。這種用法經(jīng)常出現(xiàn)在全局頭部或底部，如全屏背景圖下的導(dǎo)航條或頁腳。

雖然vh單位的應(yīng)用是非常方便的，但也需要注意一些問題，如在瀏覽器窗口縮小至一定程度時(shí)，頁面元素可能會(huì)出現(xiàn)滾動(dòng)條，導(dǎo)致視口高度發(fā)生改變，從而影響vh單位的計(jì)算結(jié)果。

綜上所述，CSS3中的vh單位是一個(gè)非常有用的特性，能夠使網(wǎng)站設(shè)計(jì)更加靈活，同時(shí)也需要注意一些細(xì)節(jié)。