資訊專欄INFORMATION COLUMN
摘要：高度的控制是自底向上的。因此，要解決這兩個問題，就需要將高度的控制方向顛倒過來高度的控制是自頂向下的。元素的高度是通過自頂向下的方式確定的比如，元素的高度是根據自底向上的方式確定的。
從一個常見問題開始討論：如何用css將一個元素的高度設置為【瀏覽器內容窗口高度】。
方案一：使元素高度占滿屏幕在css中，vh是一個特殊的長度單位，100vh的值就是【瀏覽器內容窗口高度】。
因此height:100vh;就使得目標元素擁有【瀏覽器內容窗口高度】。
方法一只能將設置一個元素擁有【瀏覽器內容窗口高度】。但是如果我們想要讓一系列的元素共同占滿高度呢？
這種需求在Web應用的場景中很常見。要想讓你的Web應用看起來像是原生應用，我們希望應用的的總體結構始終占滿整個屏幕，不多不少，不出現滾動條。如果內部有很多內容需要滾動顯示，那么在應用內部的某個div中可以出現滾動條，但是應用主體不滾動。
這是一個高度坍縮的例子，整體的高度完全取決于內容的高度，很丑：
這是一個高度過大的例子，應用整體出現了滾動條，頂欄可以被滾走：
如果整體可以滾動，那么向下滾動以后，頂欄的內容就也會滾上去，消失不見。普通網頁經常是這樣做的，但是Web應用中不應該出現這種情況。
這是一個高度正常的例子。一個實現良好的Web應用，應用的整體是無法滾動的，但是中間的內容窗口可以滾動：
高度坍縮和高度過大的原因其實是相同的：父元素的高度受子元素高度影響。換句話說，父元素是被子元素“撐開”的。高度的控制是自底向上的。
父元素高度被子元素撐開的原因是height的默認值是auto，auto的計算方式就是根據子元素。
因此，要解決這兩個問題，就需要將高度的控制方向顛倒過來：高度的控制是自頂向下的。具體來說就是，要么為元素定義一個明確的高度，要么相對“祖父元素”的高度來設置一個相對高度(百分數)。
定義一個明確的高度：給元素的高度一個明確的值，這樣的話它的高度就不會受到它的孩子的影響。比如height:480px;或height:100vh。
相對“祖父元素”的高度來設置一個相對高度：元素的高度由父元素的高度決定，因此不受它的孩子的影響。使用百分比高度來做到這一點：height:100%;或height:90%;。
只要靈活地運用以上兩點，開發者就能掌控整個應用各個元素的高度。
在上面Web應用的例子中，解決方案就是：
先將元素的高度設置為100%，這使得html元素的高度恰好等于viewport(內容窗口)的高度；然后設置body的高度為100%，這使得body元素的高度恰好等于html元素的高度(也就等于viewport的高度)……
就這樣不斷進行，自頂向下，一路走到希望撐滿屏幕的那個元素，將它的高度也設置為100%，這樣它的高度也等于viewport高度了。
這是一個自頂向下的特殊例子。實際上你可以在自頂向下設置高度的過程中，根據自己的排版需要，設置一個定值(100px)，或者其他的百分高度(80%)。
這個辦法比起直接為目標元素設置height:100vh;，確實要要麻煩多了。但是這個辦法有一個優勢：在這個過程中，所有祖先元素的高度都能夠被你控制。只要你不故意為子元素設置一個比父元素還大的高度，那么每個父元素就都能容納子元素，這在大多數情況下就是我們所希望的。不會出現“子元素高度為100px，父元素的高度卻沒有被撐開”這種問題。
而如果你僅僅設置目標元素的height:100vh;，而父元素的高度又是由自頂向下的方式確定的（不受子元素影響），那么父元素就會維持原高度不被撐開，然后就會出現overflow。這時就會出現“子元素高度為xxx，父元素的高度卻沒有被撐開”這種問題。
并不是說自頂向下就一定比自底向上要好。
自頂向下的優勢在于，只要定義好祖先元素的高度，后裔元素的高度也就隨之確定。
自底向上的優勢在于，父元素的高度能夠根據需要自動擴張，并且恰好包裹住所有子元素。
在一個Web應用中，往往需要混合使用這兩種方式。
注意，當父元素的內容盒子(content box)無法容納子元素時，就會出現overflow。
在混合使用自頂向下和自底向上的方式時，有可能會碰到這種問題：
A元素是B元素的父元素。A元素的高度是通過自頂向下的方式確定的(比如height:80%)，B元素的高度是根據自底向上的方式確定的(height:auto)。當B的子元素將B的高度撐開，超過A的內容盒子高度時，就出現了overflow。
這種時候，考慮兩個方案：
限制B的高度，也就是說，為B元素的height指定一個不大于父元素高度的值。比如height:100px或者height:100%。
如果你希望要在A元素中展示B的內容，那么為A設置overflow:auto。這樣就能在有限的空間中通過滾動條來容納更大的內容。
聊天窗口就是一個overflow:auto的例子參考資料
https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://stackoverflow.com/a/3...
https://www.w3.org/TR/2011/RE...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/116731.html
摘要：主軸方向的多余空間的出現是因為容器寬度元素項寬度之和。對空間分配的思考是如何計算項的寬度的所有項先按照原始寬度在容器中排列。開發時布局的一般流程根據設計，確定需要多少行來顯示所有內容，然后確定每一行有哪些項。對每一項，定義其樣式。 閱讀本文之前最好對flex布局有基本了解，可以通過參考資料中列舉的資源來學習。 flex布局規范的設計目標 一維布局模型(one-dimensional...
摘要：上一篇中已經介紹了幾個簡單的排序算法，這一篇文章我將繼續向大家介紹排序算法相關的內容，本篇的會介紹希爾排序快速排序歸并排序以及分治算法的思想，希望通過本文章能夠加深大家對排序算法的理解。 上一篇中已經介紹了幾個簡單的排序算法，這一篇文章我將繼續向大家介紹排序算法相關的內容，本篇的會介紹希爾排序、快速排序、歸并排序以及分治算法的思想，希望通過本文章能夠加深大家對排序算法的理解。 希爾排序...
摘要：在本文中，筆者主要想分享一下自底向上構建知識圖譜的全過程，拋磚引玉，歡迎大家交流。隨著自動知識抽取與加工技術的不斷成熟，當前的知識圖譜大多采用自底向上的方式構建，如的和微軟的知識庫。 阿里妹導讀：知識圖譜的構建技術主要有自頂向下和自底向上兩種。其中自頂向下構建是指借助百科類網站等結構化數據源，從高質量數據中提取本體和模式信息，加入到知識庫里。而自底向上構建，則是借助一定的技術手段，從...
摘要：有網友私信我，期待我的下一篇數據結構。前言數據結構與算法專題會不定時更新，歡迎各位讀者監督。本文介紹數據結構里一些復雜的數據結構樹，相應的會補充一些算法。除根節點外，每個節點又可以分為多個不相交的子樹。 聲明：碼字不易，轉載請注明出處，歡迎文章下方討論交流。有網友私信我，期待我的下一篇數據結構。非常榮幸文章被認可，也非常感謝你們的監督。 前言：Java數據結構與算法專題會不定時更新，歡...
閱讀 1447·2023-04-26 01:35
閱讀 2876·2021-11-02 14:44
閱讀 8389·2021-09-22 15:38
閱讀 2422·2021-09-06 15:11
閱讀 4004·2019-08-30 15:53
閱讀 1051·2019-08-29 16:54
閱讀 888·2019-08-26 13:48
閱讀 2077·2019-08-26 13:47
