情境

不知道大家有沒有設計過官網或是活動頁的經驗呢？

主頁橫幅(Hero Section)往往是針對網站訪問者遇到的第一視覺頁面，其目的是要提出一個該網站最重要的內容進行概述。主頁橫幅往往由圖像和文字構成，可以是靜態或動態的內容。

假設下圖是我們某個產品的官網：

在這個 Hero Section 當中，我們能夠看見他的主標題，以及一些描述。在正常狀況下，這個頁面顯示起來是正常的。

你能看見多遠的未來呢？

按照設計圖，我們會知道這個 Hero Section 的長度以及寬度，假設設計圖高度是 300px，那我們可能會這樣寫：

.hero-section {
  height: 300px;
}

但是需要特別留意的是，我們要對「固定高度」有一個敏感度，因為畫面破版很容易出現在這樣的小地方。

以上圖為例，我們的產品描述只有兩行，但是如果這裡描述的文字是可變動的呢？他有沒有可能變成這樣：

上面這樣的情境在現實當中存不存在呢？我們舉幾個例子：

• 假設我們今天做的是線上開店服務的網站，我們有一些固定的 Hero Section 版型提供給店家，那即使每一家店用的是同一個 Hero Section 版型，但他的標題以及內容就很可能不同
• 假設我們是做線上課程學院的網站，每一個客戶就有一間獨立的學校，一個學校就是一個網站的意思。那他們也會遇到同一個版型給不同的學校使用的情境，跟線上開店的例子很類似。
• 線上履歷網站也是如此，我們提供一些版型給使用者套用，讓使用者能夠按照自己的喜好套用不同的版型來製作自己的履歷，如果我們的 section 高度是固定的，使用者只要內容填寫太豐富，就會產生破版情況。

固定高度的卡片

固定高度但內容太多造成破版的情境我們再舉一個例子：

為了卡片的整齊以及美觀，我們也通常會給裡面的元件固定的高度，例如這樣：

.card-description {
  height: 120px;
}

但是卡片的內容長度常常也是我們無法掌握的一環，因為他很有可能來自於使用者的輸入，所以如果只是給他一個固定的高度後就放著不管的話，那他也很可能會在關鍵時刻毫不留情的破版給你看。

考慮使用 min-height 取代 height

考慮使用 min-height 取代 height 可以讓我們的 Hero Section 高度更有彈性，當內容在正常範圍，他會維持最小寬度，但當內容超出預期時，也能夠伸縮自如：

.hero-section {
  min-height: 300px;
}

小結

今天我們討論了設置固定的高度所可能帶來的潛在危險，這樣的破版危險，並不總是會發生，也並非在每種情境下都可能會發生。

我們考慮使用 min-height 取代 height，這樣讓我們的高度調節更有彈性，不過並非每一種情境都適合這樣的解決方案，或許我們的網站設計師有更適合該網站的適應調整方式。在做出選擇之前，我們可以一起多討論，但當大家都沒有想法的時候，至少你還有這一招可以用。