100vh與視口寬度(vw)和最小高度(min height)的關系和區別

100vh、vw（視口寬度）和min-height（最小高度）都是CSS中的屬性，它們用來定義元素的大小。它們之間的關系和區別如下：

1. 100vh：

   • 含義：100vh表示視口高度的100%。
   • 使用場景：通常用於設置元素的高度，使其占據整個視口的高度。
   • 注意事項：100vh可能會導致頁面在某些瀏覽器或設備上出現滾動條，因為瀏覽器會預留一些空間給狀態欄、地址欄等。

2. vw（視口寬度）：

   • 含義：vw表示視口寬度的1%。例如，10vw表示視口寬度的10%。
   • 使用場景：通常用於設置元素的寬度，使其根據視口寬度按比例變化。
   • 注意事項：vw屬性會隨著視口寬度的變化而變化，因此適用於響應式布局。

3. min-height（最小高度）：

   • 含義：min-height屬性用於設置元素的最小高度。
   • 使用場景：當元素的內容可能會超過預設高度時，可以使用min-height來確保元素至少具有一定的最小高度，以避免內容被擠壓。
   • 注意事項：min-height不會自動適應視口的大小，它是一個固定的值。

總結來說，100vh和vw都是相對於視口大小的單位，而min-height是一個固定的值。100vh控制元素的高度，vw控制元素的寬度，而min-height控制元素的最小高度。選擇哪種屬性取決於你想要實現的效果和頁面的布局需求。