如何設定 CSS 高度自適應｜新手指南
更新日期： 2024 年 10 月 28 日
當你開始學習 CSS 時，如何設置元素的高度是一個常見的挑戰。
你可能會想著直接使用 height 屬性來設定高度，但其實有很多方法可以不用 height，卻依然能夠達到想要的效果。
這些方法能讓你的網頁更加靈活、易於維護，並且更適應不同裝置的螢幕尺寸。
本文將帶你了解幾種常用的方法。
為何不應該直接設定高度？
直接設定容器的高度雖然看似簡單，但在實際應用中可能會帶來一些問題。
例如，當內容的高度超過設定的高度時，容易出現內容被截斷的情況，這會影響使用者的體驗。
此外，固定高度的元素，在不同的螢幕尺寸和裝置上可能無法自適應，導致頁面布局錯亂，或者顯得不合適。
因此，使用其他能自動調整高度的技巧，可以使你的設計更具彈性，更加適應不同的環境和使用者需求。
容器內部元素撐開高度的重點
以下介紹的這些方法的核心在於，只設定子層元素的高度，讓容器內部的元素來撐開容器的高度，而不是直接對容器設置固定的高度。
這樣的做法可以確保容器，能夠靈活適應內容的高度變化，避免因為固定高度而導致的內容裁切或布局問題。
使用這些技巧，你可以創造出更加動態和自適應的布局，從而提升網頁的使用者體驗。
使用 padding 設定比例高度
一個常見的技巧是使用 padding 來控制容器的高度，而不直接使用 height。
這個方法基於 padding 的百分比是相對於元素的寬度來計算的，因此可以用來維持一個固定的寬高比。
HTML
<div class="container"></div>CSS
.container {
width: 100%;
padding-top: 50%; /* 高度為寬度的 50% */
}這樣的設定會讓容器的高度是寬度的一半，形成 2:1 的比例。
這個技巧經常被用在需要保持特定比例的圖片或視頻嵌套中。
使用 Flexbox 讓子元素撐開容器
Flexbox 是一個非常強大的佈局工具，可以讓容器的高度自動適應其內部內容的高度。
在這個方法中，你可以讓子元素撐開父容器，而無需指定明確的高度。
HTML
<div class="container">
<div class="child">內容</div>
</div>CSS
.container {
display: flex;
align-items: stretch;
}
.child {
flex: 1;
}這樣的設置方式可以保證容器的高度，自動根據子元素的高度來變化，而不需要手動設定高度值，這在自適應網頁設計中非常有用。
flex 1 補充說明
flex: 1 是 Flexbox 布局中的一個屬性組合。
簡單來說，它表示子元素將在父容器內佔據可用的剩餘空間。
具體來說，flex: 1 等價於：
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;讓我們逐項理解這些屬性：
flex-grow: 1：這個屬性告訴元素在空間充裕的情況下，它應該如何成長。
如果多個元素都設置了flex-grow: 1，那麼它們會均等地分配父容器中的剩餘空間。
例如，三個元素設為flex-grow: 1，它們會平分容器中的剩餘空間。flex-shrink: 1：這個屬性表示當父容器空間不足時，該元素應該如何收縮。flex-shrink: 1表示元素將根據需要進行收縮。
如果多個元素的flex-shrink值相同，它們會均等地縮小。flex-basis: 0%：這個屬性定義了元素的基礎大小。flex-basis: 0%表示元素的基礎大小為 0，但由於設置了flex-grow，它會根據父容器的可用空間來成長。
因此，flex: 1 綜合了這三個屬性的效果，表示子元素可以自由成長並佔據剩餘空間，在需要的時候也可以進行收縮，從而使容器內的所有子元素保持均等的寬度或高度。
這在創建自適應佈局時非常有用。
使用 Grid Layout 的自動適應高度
CSS Grid 也可以用來讓容器，自動適應其內容的高度。
通過設定 grid-template-rows 或使用 auto 值，可以讓高度根據內容自動調整。
HTML
<div class="container">
<div>區域 1</div>
<div>區域 2</div>
<div>區域 3</div>
</div>CSS
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}在這裡，auto 的行高會根據內容的高度自動調整，而不需要明確的 height 設定。
這種方式讓我們可以方便地控制各個區域的高度，使頁面更加靈活。
使用 min-height 確保最小高度
如果你想要確保容器有一個最低高度，而其實際高度可以隨內容變動，那麼 min-height 就是一個好工具。
HTML
<div class="container">這裡是內容</div>CSS
.container {
min-height: 200px;
}這樣的設置可以讓容器的高度至少是 200px，但如果內容更多，高度就會自動增大，避免內容被裁切。
使用 vh 單位設定視窗相對高度
有時候，你可能想讓元素的高度根據視窗高度來設定，這時候 vh 單位就派上用場了。
vh 代表視窗高度的百分比，100vh 即為視窗的全部高度。
HTML
<div class="container">全屏背景或 Hero 區塊</div>CSS
.container {
height: 50vh; /* 高度為視窗高度的 50% */
}這樣可以讓容器的高度，根據視窗尺寸動態調整，特別適合全屏背景或 Hero 區塊的設計。
使用 float 讓元素撐開高度
另一個可以使用的方法是 float。
儘管 float 最初是用來讓圖片浮動並讓文字環繞的，但我們也可以用它來撐開容器的高度。
在使用 float 佈局時，可以使用清除浮動的技術來讓父元素包含浮動的子元素，從而撐開容器的高度。
HTML
<div class="container clearfix">
<div class="child">子元素 1</div>
<div class="child">子元素 2</div>
</div>CSS
.container {
overflow: hidden;
}
.child {
float: left;
width: 50%;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}在這個例子中，.child 元素使用了 float: left，使得子元素浮動在容器內，而父容器通過設置 overflow: hidden 來包含浮動的子元素，從而自動撐開高度。
此外，在結尾處添加 clear: both 或使用 clearfix 類可以防止高度爆掉，確保佈局的完整性。
這種方式可以用於一些需要簡單佈局的場景。
結語
不用 height 屬性來設定容器高度的方法有很多。
像是使用 padding 來維持比例、使用 Flexbox 或 Grid 來讓容器自動適應內容、使用 float 來撐開高度，或使用 min-height 和 vh 單位來創造更靈活的布局。
這些方法能幫助你，打造更加自適應和靈活的網頁，並且使你的設計能夠更好地應對，各種裝置和螢幕尺寸。