從一個常見問題開始討論：如何用css將一個元素的高度設置為【瀏覽器內容窗口高度】。

方案一：使元素高度占滿屏幕

在css中，vh是一個特殊的長度單位，100vh的值就是【瀏覽器內容窗口高度】。

因此height:100vh;就使得目標元素擁有【瀏覽器內容窗口高度】。

方案二：使用級聯的height:100%;

方法一只能將設置一個元素擁有【瀏覽器內容窗口高度】。但是如果我們想要讓一系列的元素共同占滿高度呢？

這種需求在Web應用的場景中很常見。要想讓你的Web應用看起來像是原生應用，我們希望應用的的總體結構始終占滿整個屏幕，不多不少，不出現滾動條。如果內部有很多內容需要滾動顯示，那么在應用內部的某個div中可以出現滾動條，但是應用主體不滾動。

這是一個高度坍縮的例子，整體的高度完全取決于內容的高度，很丑：

這是一個高度過大的例子，應用整體出現了滾動條，頂欄可以被滾走：

如果整體可以滾動，那么向下滾動以后，頂欄的內容就也會滾上去，消失不見。普通網頁經常是這樣做的，但是Web應用中不應該出現這種情況。

這是一個高度正常的例子。一個實現良好的Web應用，應用的整體是無法滾動的，但是中間的內容窗口可以滾動：

解決思路：自頂向下控制高度

高度坍縮和高度過大的原因其實是相同的：父元素的高度受子元素高度影響。換句話說，父元素是被子元素“撐開”的。高度的控制是自底向上的。

父元素高度被子元素撐開的原因是height的默認值是auto，auto的計算方式就是根據子元素。

因此，要解決這兩個問題，就需要將高度的控制方向顛倒過來：高度的控制是自頂向下的。具體來說就是，要么為元素定義一個明確的高度，要么相對“祖父元素”的高度來設置一個相對高度(百分數)。

定義一個明確的高度：給元素的高度一個明確的值，這樣的話它的高度就不會受到它的孩子的影響。比如height:480px;或height:100vh。 相對“祖父元素”的高度來設置一個相對高度：元素的高度由父元素的高度決定，因此不受它的孩子的影響。使用百分比高度來做到這一點：height:100%;或height:90%;。

只要靈活地運用以上兩點，開發者就能掌控整個應用各個元素的高度。