CSS中height設(shè)置100vh和100%的區(qū)別

一、引言

在前端開(kāi)發(fā)中，我們經(jīng)常需要設(shè)置元素的高度。CSS 提供了多種方式來(lái)定義元素的高度，其中 height: 100%; 和 height: 100vh; 是兩種常見(jiàn)的設(shè)置方式。它們之間有著明顯的區(qū)別，了解這些區(qū)別對(duì)于創(chuàng)建響應(yīng)式布局和實(shí)現(xiàn)特定的視覺(jué)效果至關(guān)重要。

二、高度設(shè)置的區(qū)別

1、100%

height: 100%; 表示元素的高度是其包含塊（父元素）的高度的 100%。這里的關(guān)鍵是“包含塊”，它可能是父元素，也可能是最近的非靜態(tài)定位的祖先元素。

1.1、父元素高度固定

當(dāng)父元素的高度被明確設(shè)置時(shí)，子元素使用 height: 100%; 將會(huì)完全填充父元素的高度。

<div style="height: 300px; background-color: yellow;"><div style="height: 100%; background-color: blue;"></div>
</div>

在這個(gè)例子中，內(nèi)部的 <div> 將會(huì)完全填充外部 <div> 的高度。

1.2、父元素高度未定義

如果父元素的高度沒(méi)有被定義，那么子元素即使設(shè)置了 height: 100%; 也不會(huì)顯示任何高度，因?yàn)榘俜直仁腔诟冈氐母叨葋?lái)計(jì)算的。

<div style="background-color: yellow;"><div style="height: 100%; background-color: blue;"></div>
</div>

這種情況下，內(nèi)部的 <div> 高度將會(huì)是 0。

2、100vh

height: 100vh; 表示元素的高度是視口（viewport）高度的 100%。vh 是 viewport height 的縮寫(xiě)，其中 1vh 等于視口高度的 1%。

2.1、視口高度

無(wú)論父元素的高度如何，使用 height: 100vh; 的元素都會(huì)擴(kuò)展到與視口相同的高度。

<div style="height: 100vh; background-color: blue;"></div>

這個(gè) <div> 將會(huì)覆蓋整個(gè)視口的高度，無(wú)視其父元素的高度。

2.2、不受父元素限制

即使父元素的高度被限制，使用 height: 100vh; 的子元素也會(huì)擴(kuò)展到視口的高度。

<div style="height: 200px; background-color: yellow;"><div style="height: 100vh; background-color: blue;"></div>
</div>

在這個(gè)例子中，內(nèi)部的 <div> 高度將會(huì)與視口一致，不受外部 <div> 的限制。

三、總結(jié)

height: 100%; 和 height: 100vh; 在 CSS 中提供了不同的高度設(shè)置方式。100% 依賴(lài)于父元素的高度，而 100vh 則與視口的高度相關(guān)。在設(shè)計(jì)響應(yīng)式布局時(shí)，合理使用這兩種單位可以提高頁(yè)面的靈活性和用戶(hù)體驗(yàn)。

---

版權(quán)聲明：本博客內(nèi)容為原創(chuàng)，轉(zhuǎn)載請(qǐng)保留原文鏈接及作者信息。

參考文章：

• CSS中height:100vh和height:100%的區(qū)別_CSDN博客
• 前端設(shè)置寬高時(shí)height： 100% 和 100vh 的區(qū)別 - 藝術(shù)詩(shī)人