網站設計中常見的問題是“如何將元素的高度設置為100％”？
這可能看起來像一個簡單的答案。 您只需使用CSS將元素的高度設置為100％，但這並不總是拉伸該元素以適應整個瀏覽器窗口。 讓我們來看看為什麼會發生這種情況，以及您可以做些什麼來實現這種視覺風格。
像素和百分比
當您使用CSS屬性和使用像素的值定義元素的高度時，該元素將佔用瀏覽器中的垂直空間。
例如，一個高度為100px的段落; 在你的設計中將佔用100像素的垂直空間。無論你的瀏覽器窗口有多大，這個元素的高度都是100像素。
百分比的工作方式與像素不同。 根據W3C規範，百分比高度是根據容器的高度計算的。 所以，如果你把一個段落的高度：50％; 在高度為100px的div內，段落高度為50像素，是其父元素的50％。
為什麼百分比高度失敗
如果你正在設計一個網頁，並且你有一列你想佔據整個窗口的高度，那麼自然的傾向是增加一個高度：100％; 到那個元素。 畢竟，如果您將寬度設置為寬度：100％; 該元素將佔據頁面的整個水平空間，所以高度應該相同，對吧？ 不幸的是，事實並非如此。
要理解為什麼發生這種情況，您必須了解瀏覽器如何解釋高度和寬度。 Web瀏覽器根據瀏覽器窗口打開的寬度來計算總可用寬度。 如果您未在文檔上設置任何寬度值，則瀏覽器將自動流動內容以填充窗口的整個寬度（100％寬度是默認寬度）。
高度值的計算方式與寬度不同。 實際上，除非內容太長以至於超出視口（因此需要滾動條），或者Web設計者為頁面上的元素設置了絕對高度，否則瀏覽器根本不評估高度。 否則，瀏覽器只是讓內容在視口寬度內流動，直到結束。 高度實際上根本不計算。
在設置父元素時未設置高度的元素上設置百分比高度時會出現問題 - 換句話說，父元素具有默認高度：auto; 。 實際上，您要求瀏覽器根據未定義的值計算高度。 由於這將等於空值，結果是瀏覽器什麼都不做。
如果要將網頁的高度設置為百分比，則必須設置要定義高度的每個父元素的高度。 換句話說，如果你有這樣一個頁面：
內容在這裡
您可能希望div和其中的段落具有100％的高度，但該div實際上有兩個父元素：
和。 為了將div的高度定義為相對高度，您還必須設置body和html元素的高度。
所以你需要使用CSS來設置不僅div的高度，而且body和html元素。 這可能是一個挑戰，因為您可以很快將所有設置為100％高度的設備都淹沒，只是為了達到預期的效果。
處理100％高度時需要注意的一些事項
現在您已知道如何將頁面元素的高度設置為100％，將頁面元素的高度設置為所有頁面可能會很令人興奮，但您應該注意以下幾點：
- 邊距和填充可以添加一個不需要滾動條的地方。 我發現處理百分比高度（和寬度）時最煩人的事情之一是，那些相同元素上的填充和邊距可以將滾動條添加到頁面，即使所有內容都顯示而不需要滾動條。 這是因為元素的高度或寬度是計算的第一件事。 然後添加邊距和填充。 因此，如果您的元素高度為100％，上下邊距均為10像素，則會有一個滾動條用於額外的20個像素。 請記住，CSS框模型將邊距，邊框和填充添加到元素的大小，因此100％的其他框模型值實際上會超過100％。
- 如果您的內容佔用的空間超過了定義的高度，它將在其後覆蓋任何內容。 換句話說，如果您的設計的柱子高度為80％，而其內部的內容將佔據高度的100％，那麼額外的20％將繼續在柱子下方並打破視覺設計的頁面。 如果該列下面有內容，則文本將簡單地寫在該列的頂部。 我經常看到這種情況發生在網頁設計師試圖強制頁面高度並使其完美啟動時發生，但是當該頁面上的內容將來發生變化時，它們的絕對高度會完全破壞頁面的流動。 當您構建響應式網站時，其寬度和高度必須隨著視口的大小而變化，這是雙重的。
為了解決這個問題，你可以設置元素的高度。 如果將其設置為自動，則會在需要時顯示滾動條，但如果不需要則會消失。 這可以修復視覺中斷，但它會在您不想要的位置添加滾動條。
使用視口單位
解決這一挑戰的另一種方法是使用CSS視口單元進行試驗。 通過使用視口高度度量單位，可以調整元素的大小以佔據視口的定義高度，並且視口將隨著視口更改而變化！ 這是在頁面上獲得100％高度視覺效果的好方法，但仍然可以靈活適用於不同的設備和屏幕尺寸。