建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)怎么在css中控制元素高度實(shí)現(xiàn)自底向上，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
創(chuàng)新互聯(lián)建站主營元江縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),元江縣h5成都小程序開發(fā)搭建,元江縣網(wǎng)站營銷推廣歡迎元江縣等地區(qū)企業(yè)咨詢方案一：使元素高度占滿屏幕
在css中，vh是一個(gè)特殊的長度單位，100vh的值就是【瀏覽器內(nèi)容窗口高度】。
因此height:100vh;就使得目標(biāo)元素?fù)碛小緸g覽器內(nèi)容窗口高度】。
方案二：使用級聯(lián)的height:100%;
方法一只能將設(shè)置一個(gè)元素?fù)碛小緸g覽器內(nèi)容窗口高度】。但是如果我們想要讓一系列的元素共同占滿高度呢？
這種需求在Web應(yīng)用的場景中很常見。要想讓你的Web應(yīng)用看起來像是原生應(yīng)用，我們希望應(yīng)用的的總體結(jié)構(gòu)始終占滿整個(gè)屏幕，不多不少，不出現(xiàn)滾動條。如果內(nèi)部有很多內(nèi)容需要滾動顯示，那么在應(yīng)用內(nèi)部的某個(gè)div中可以出現(xiàn)滾動條，但是應(yīng)用主體不滾動。
這是一個(gè)高度坍縮的例子，整體的高度完全取決于內(nèi)容的高度，很丑：
這是一個(gè)高度過大的例子，應(yīng)用整體出現(xiàn)了滾動條，頂欄可以被滾走：
如果整體可以滾動，那么向下滾動以后，頂欄的內(nèi)容就也會滾上去，消失不見。普通網(wǎng)頁經(jīng)常是這樣做的，但是Web應(yīng)用中不應(yīng)該出現(xiàn)這種情況。
這是一個(gè)高度正常的例子。一個(gè)實(shí)現(xiàn)良好的Web應(yīng)用，應(yīng)用的整體是無法滾動的，但是中間的內(nèi)容窗口可以滾動：
解決思路：自頂向下控制高度
高度坍縮和高度過大的原因其實(shí)是相同的：父元素的高度受子元素高度影響。換句話說，父元素是被子元素“撐開”的。高度的控制是自底向上的。
父元素高度被子元素?fù)伍_的原因是height的默認(rèn)值是auto，auto的計(jì)算方式就是根據(jù)子元素。因此，要解決這兩個(gè)問題，就需要將高度的控制方向顛倒過來：高度的控制是自頂向下的。具體來說就是，要么為元素定義一個(gè)明確的高度，要么相對“祖父元素”的高度來設(shè)置一個(gè)相對高度(百分?jǐn)?shù))。
定義一個(gè)明確的高度：給元素的高度一個(gè)明確的值，這樣的話它的高度就不會受到它的孩子的影響。比如
height:480px;或height:100vh。相對“祖父元素”的高度來設(shè)置一個(gè)相對高度：元素的高度由父元素的高度決定，因此不受它的孩子的影響。使用百分比高度來做到這一點(diǎn)：
height:100%;或height:90%;。
只要靈活地運(yùn)用以上兩點(diǎn)，開發(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è)置高度的過程中，根據(jù)自己的排版需要，設(shè)置一個(gè)定值(100px)，或者其他的百分高度(80%)。
這個(gè)辦法比起直接為目標(biāo)元素設(shè)置height:100vh;，確實(shí)要要麻煩多了。但是這個(gè)辦法有一個(gè)優(yōu)勢：在這個(gè)過程中，所有祖先元素的高度都能夠被你控制。只要你不故意為子元素設(shè)置一個(gè)比父元素還大的高度，那么每個(gè)父元素就都能容納子元素，這在大多數(shù)情況下就是我們所希望的。不會出現(xiàn)“子元素高度為100px，父元素的高度卻沒有被撐開”這種問題。
而如果你僅僅設(shè)置目標(biāo)元素的height:100vh;，而父元素的高度又是由自頂向下的方式確定的（不受子元素影響），那么父元素就會維持原高度不被撐開，然后就會出現(xiàn)overflow。這時(shí)就會出現(xiàn)“子元素高度為xxx，父元素的高度卻沒有被撐開”這種問題。
自頂向下的實(shí)用技巧：讓子元素填滿父元素的剩余區(qū)域
自頂向下的方式有一個(gè)很實(shí)用的技巧：
如果和
的高度已經(jīng)確定(100%viewport)，header的高度也已經(jīng)確定(64px)，如何讓header下方的div.content恰好填滿父元素的剩余區(qū)域呢？答案也很簡單，直接設(shè)置div.content { height: 100%; }就好了。100%是相對于【父元素剩余可用高度】來計(jì)算的，因此這個(gè)css會讓div.content填滿父元素剩余區(qū)域。這個(gè)圖中的效果就是這樣實(shí)現(xiàn)的：
自頂向下和自底向上的對比
并不是說自頂向下就一定比自底向上要好。
自頂向下的優(yōu)勢在于，只要定義好祖先元素的高度，后裔元素的高度也就隨之確定。
自底向上的優(yōu)勢在于，父元素的高度能夠根據(jù)需要自動擴(kuò)張，并且恰好包裹住所有子元素。
在一個(gè)Web應(yīng)用中，往往需要混合使用這兩種方式。
注意內(nèi)容溢出的問題
注意，當(dāng)父元素的內(nèi)容盒子(content box)無法容納子元素時(shí)，就會出現(xiàn)overflow。
在混合使用自頂向下和自底向上的方式時(shí)，有可能會碰到這種問題：
A元素是B元素的父元素。A元素的高度是通過自頂向下的方式確定的(比如height:80%)，B元素的高度是根據(jù)自底向上的方式確定的(height:auto)。當(dāng)B的子元素將B的高度撐開，超過A的內(nèi)容盒子高度時(shí)，就出現(xiàn)了overflow。
這種時(shí)候，考慮兩個(gè)方案：
限制B的高度，也就是說，為B元素的height指定一個(gè)不大于父元素高度的值。比如
height:100px或者height:100%。如果你希望要在A元素中展示B的內(nèi)容，那么為A設(shè)置
overflow:auto。這樣就能在有限的空間中通過滾動條來容納更大的內(nèi)容。
什么是css
css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。
關(guān)于怎么在css中控制元素高度實(shí)現(xiàn)自底向上就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
網(wǎng)站名稱：怎么在css中控制元素高度實(shí)現(xiàn)自底向上-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://www.dlmjj.cn/article/cohdei.html
