成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

用css控制元素高度：自底向上和自頂向下的方法

Kosmos / 3775人閱讀

摘要：高度的控制是自底向上的。因此，要解決這兩個(gè)問(wèn)題，就需要將高度的控制方向顛倒過(guò)來(lái)高度的控制是自頂向下的。元素的高度是通過(guò)自頂向下的方式確定的比如，元素的高度是根據(jù)自底向上的方式確定的。

從一個(gè)常見(jiàn)問(wèn)題開(kāi)始討論：如何用css將一個(gè)元素的高度設(shè)置為【瀏覽器內(nèi)容窗口高度】。

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

在css中，vh是一個(gè)特殊的長(zhǎng)度單位，100vh的值就是【瀏覽器內(nèi)容窗口高度】。
因此height:100vh;就使得目標(biāo)元素擁有【瀏覽器內(nèi)容窗口高度】。

方案二：使用級(jí)聯(lián)的height:100%;

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

這種需求在Web應(yīng)用的場(chǎng)景中很常見(jiàn)。要想讓你的Web應(yīng)用看起來(lái)像是原生應(yīng)用，我們希望應(yīng)用的的總體結(jié)構(gòu)始終占滿整個(gè)屏幕，不多不少，不出現(xiàn)滾動(dòng)條。如果內(nèi)部有很多內(nèi)容需要滾動(dòng)顯示，那么在應(yīng)用內(nèi)部的某個(gè)div中可以出現(xiàn)滾動(dòng)條，但是應(yīng)用主體不滾動(dòng)。

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

這是一個(gè)高度過(guò)大的例子，應(yīng)用整體出現(xiàn)了滾動(dòng)條，頂欄可以被滾走：

如果整體可以滾動(dòng)，那么向下滾動(dòng)以后，頂欄的內(nèi)容就也會(huì)滾上去，消失不見(jiàn)。普通網(wǎng)頁(yè)經(jīng)常是這樣做的，但是Web應(yīng)用中不應(yīng)該出現(xiàn)這種情況。

這是一個(gè)高度正常的例子。一個(gè)實(shí)現(xiàn)良好的Web應(yīng)用，應(yīng)用的整體是無(wú)法滾動(dòng)的，但是中間的內(nèi)容窗口可以滾動(dòng)：

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

高度坍縮和高度過(guò)大的原因其實(shí)是相同的：父元素的高度受子元素高度影響。換句話說(shuō)，父元素是被子元素“撐開(kāi)”的。高度的控制是自底向上的。

父元素高度被子元素?fù)伍_(kāi)的原因是height的默認(rèn)值是auto，auto的計(jì)算方式就是根據(jù)子元素。

因此，要解決這兩個(gè)問(wèn)題，就需要將高度的控制方向顛倒過(guò)來(lái)：高度的控制是自頂向下的。具體來(lái)說(shuō)就是，要么為元素定義一個(gè)明確的高度，要么相對(duì)“祖父元素”的高度來(lái)設(shè)置一個(gè)相對(duì)高度(百分?jǐn)?shù))。

定義一個(gè)明確的高度：給元素的高度一個(gè)明確的值，這樣的話它的高度就不會(huì)受到它的孩子的影響。比如height:480px;或height:100vh。

相對(duì)“祖父元素”的高度來(lái)設(shè)置一個(gè)相對(duì)高度：元素的高度由父元素的高度決定，因此不受它的孩子的影響。使用百分比高度來(lái)做到這一點(diǎn)：height:100%;或height:90%;。

只要靈活地運(yùn)用以上兩點(diǎn)，開(kāi)發(fā)者就能掌控整個(gè)應(yīng)用各個(gè)元素的高度。

在上面Web應(yīng)用的例子中，解決方案就是：
先將元素的高度設(shè)置為100%，這使得html元素的高度恰好等于viewport(內(nèi)容窗口)的高度；然后設(shè)置body的高度為100%，這使得body元素的高度恰好等于html元素的高度(也就等于viewport的高度)……
就這樣不斷進(jìn)行，自頂向下，一路走到希望撐滿屏幕的那個(gè)元素，將它的高度也設(shè)置為100%，這樣它的高度也等于viewport高度了。

這是一個(gè)自頂向下的特殊例子。實(shí)際上你可以在自頂向下設(shè)置高度的過(guò)程中，根據(jù)自己的排版需要，設(shè)置一個(gè)定值(100px)，或者其他的百分高度(80%)。

這個(gè)辦法比起直接為目標(biāo)元素設(shè)置height:100vh;，確實(shí)要要麻煩多了。但是這個(gè)辦法有一個(gè)優(yōu)勢(shì)：在這個(gè)過(guò)程中，所有祖先元素的高度都能夠被你控制。只要你不故意為子元素設(shè)置一個(gè)比父元素還大的高度，那么每個(gè)父元素就都能容納子元素，這在大多數(shù)情況下就是我們所希望的。不會(huì)出現(xiàn)“子元素高度為100px，父元素的高度卻沒(méi)有被撐開(kāi)”這種問(wèn)題。
而如果你僅僅設(shè)置目標(biāo)元素的height:100vh;，而父元素的高度又是由自頂向下的方式確定的（不受子元素影響），那么父元素就會(huì)維持原高度不被撐開(kāi)，然后就會(huì)出現(xiàn)overflow。這時(shí)就會(huì)出現(xiàn)“子元素高度為xxx，父元素的高度卻沒(méi)有被撐開(kāi)”這種問(wèn)題。

自頂向下和自底向上的對(duì)比

并不是說(shuō)自頂向下就一定比自底向上要好。
自頂向下的優(yōu)勢(shì)在于，只要定義好祖先元素的高度，后裔元素的高度也就隨之確定。
自底向上的優(yōu)勢(shì)在于，父元素的高度能夠根據(jù)需要自動(dòng)擴(kuò)張，并且恰好包裹住所有子元素。
在一個(gè)Web應(yīng)用中，往往需要混合使用這兩種方式。

注意內(nèi)容溢出的問(wèn)題

注意，當(dāng)父元素的內(nèi)容盒子(content box)無(wú)法容納子元素時(shí)，就會(huì)出現(xiàn)overflow。
在混合使用自頂向下和自底向上的方式時(shí)，有可能會(huì)碰到這種問(wèn)題：
A元素是B元素的父元素。A元素的高度是通過(guò)自頂向下的方式確定的(比如height:80%)，B元素的高度是根據(jù)自底向上的方式確定的(height:auto)。當(dāng)B的子元素將B的高度撐開(kāi)，超過(guò)A的內(nèi)容盒子高度時(shí)，就出現(xiàn)了overflow。

這種時(shí)候，考慮兩個(gè)方案：

限制B的高度，也就是說(shuō)，為B元素的height指定一個(gè)不大于父元素高度的值。比如height:100px或者height:100%。

如果你希望要在A元素中展示B的內(nèi)容，那么為A設(shè)置overflow:auto。這樣就能在有限的空間中通過(guò)滾動(dòng)條來(lái)容納更大的內(nèi)容。

聊天窗口就是一個(gè)overflow:auto的例子

參考資料

https://stackoverflow.com/que...

https://stackoverflow.com/que...

https://stackoverflow.com/a/3...

https://www.w3.org/TR/2011/RE...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116731.html

相關(guān)文章

  • 對(duì)Flex布局的總結(jié)與思考

    摘要：主軸方向的多余空間的出現(xiàn)是因?yàn)槿萜鲗挾仍仨?xiàng)寬度之和。對(duì)空間分配的思考是如何計(jì)算項(xiàng)的寬度的所有項(xiàng)先按照原始寬度在容器中排列。開(kāi)發(fā)時(shí)布局的一般流程根據(jù)設(shè)計(jì)，確定需要多少行來(lái)顯示所有內(nèi)容，然后確定每一行有哪些項(xiàng)。對(duì)每一項(xiàng)，定義其樣式。 閱讀本文之前最好對(duì)flex布局有基本了解，可以通過(guò)參考資料中列舉的資源來(lái)學(xué)習(xí)。 flex布局規(guī)范的設(shè)計(jì)目標(biāo) 一維布局模型(one-dimensional...

    springDevBird 評(píng)論0 收藏0

  • 算法學(xué)習(xí)筆記：排序算法(二)

    摘要：上一篇中已經(jīng)介紹了幾個(gè)簡(jiǎn)單的排序算法，這一篇文章我將繼續(xù)向大家介紹排序算法相關(guān)的內(nèi)容，本篇的會(huì)介紹希爾排序快速排序歸并排序以及分治算法的思想，希望通過(guò)本文章能夠加深大家對(duì)排序算法的理解。 上一篇中已經(jīng)介紹了幾個(gè)簡(jiǎn)單的排序算法，這一篇文章我將繼續(xù)向大家介紹排序算法相關(guān)的內(nèi)容，本篇的會(huì)介紹希爾排序、快速排序、歸并排序以及分治算法的思想，希望通過(guò)本文章能夠加深大家對(duì)排序算法的理解。 希爾排序...

    William_Sang 評(píng)論0 收藏0

  • 一文揭秘！自底向上構(gòu)建知識(shí)圖譜全過(guò)程

    摘要：在本文中，筆者主要想分享一下自底向上構(gòu)建知識(shí)圖譜的全過(guò)程，拋磚引玉，歡迎大家交流。隨著自動(dòng)知識(shí)抽取與加工技術(shù)的不斷成熟，當(dāng)前的知識(shí)圖譜大多采用自底向上的方式構(gòu)建，如的和微軟的知識(shí)庫(kù)。 阿里妹導(dǎo)讀：知識(shí)圖譜的構(gòu)建技術(shù)主要有自頂向下和自底向上兩種。其中自頂向下構(gòu)建是指借助百科類(lèi)網(wǎng)站等結(jié)構(gòu)化數(shù)據(jù)源，從高質(zhì)量數(shù)據(jù)中提取本體和模式信息，加入到知識(shí)庫(kù)里。而自底向上構(gòu)建，則是借助一定的技術(shù)手段，從...

    馬龍駒 評(píng)論0 收藏0

  • 軟件測(cè)試考前復(fù)習(xí)

    摘要：在軟件開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)小組的人員應(yīng)該少而精對(duì)測(cè)試人員在軟件開(kāi)發(fā)過(guò)程中的任務(wù)主要是尋找并修正該錯(cuò)尋找避免軟件開(kāi)發(fā)過(guò)程中的缺陷，衡量軟件的品質(zhì)，關(guān)注用戶的需求軟件工程這個(gè)名詞是在年北大西洋公約組織的計(jì)算機(jī)科學(xué)家在美國(guó)召開(kāi)的國(guó)際會(huì) 在軟件開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)小組的人員應(yīng)該少而精 （對(duì)）測(cè)試人員在軟...

    layman 評(píng)論0 收藏0

  • Java數(shù)據(jù)結(jié)構(gòu)與算法——樹(shù)（基本概念，很重要）

    摘要：有網(wǎng)友私信我，期待我的下一篇數(shù)據(jù)結(jié)構(gòu)。前言數(shù)據(jù)結(jié)構(gòu)與算法專(zhuān)題會(huì)不定時(shí)更新，歡迎各位讀者監(jiān)督。本文介紹數(shù)據(jù)結(jié)構(gòu)里一些復(fù)雜的數(shù)據(jù)結(jié)構(gòu)樹(shù)，相應(yīng)的會(huì)補(bǔ)充一些算法。除根節(jié)點(diǎn)外，每個(gè)節(jié)點(diǎn)又可以分為多個(gè)不相交的子樹(shù)。 聲明：碼字不易，轉(zhuǎn)載請(qǐng)注明出處，歡迎文章下方討論交流。有網(wǎng)友私信我，期待我的下一篇數(shù)據(jù)結(jié)構(gòu)。非常榮幸文章被認(rèn)可，也非常感謝你們的監(jiān)督。 前言：Java數(shù)據(jù)結(jié)構(gòu)與算法專(zhuān)題會(huì)不定時(shí)更新，歡...

    MangoGoing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<