摘要:你知道為什么不起作用嗎按常理,當(dāng)我們用的屬性定義一個(gè)元素的高度時(shí),這個(gè)元素應(yīng)該按照設(shè)定在瀏覽器的縱向空間里擴(kuò)展相應(yīng)的空間距離。
當(dāng)你設(shè)置一個(gè)頁(yè)面元素的高度(height)為100%時(shí),期望這樣元素能撐滿整個(gè)瀏覽器窗口的高度,但大多數(shù)情況下,這樣的做法沒(méi)有任何效果。你知道為什么height:100%不起作用嗎?
按常理,當(dāng)我們用CSS的height屬性定義一個(gè)元素的高度時(shí),這個(gè)元素應(yīng)該按照設(shè)定在瀏覽器的縱向空間里擴(kuò)展相應(yīng)的空間距離。例如,如果一個(gè)div元素的CSS是height: 100px;,那它應(yīng)該在頁(yè)面的豎向空間里占滿100px的高度。
而跟W3C的規(guī)范,百分比的高度在設(shè)定時(shí)需要根據(jù)這個(gè)元素的父元素容器的高度。所以,如果你把一個(gè)div的高度設(shè)定為height: 50%;,而它的父元素的高度是100px,那么,這個(gè)div的高度應(yīng)該是50px。
那為什么 height:100%; 不起作用
當(dāng)設(shè)計(jì)一個(gè)頁(yè)面時(shí),你在里面放置了一個(gè)div元素,你希望它占滿整個(gè)窗口高度,最自然的做法,你會(huì)給這個(gè)div添加height: 100%;的css屬性。然而,如果你要是設(shè)置寬度為width: 100%;,那這個(gè)元素的寬度會(huì)立刻擴(kuò)展到窗口的整個(gè)橫向?qū)挾取8叨纫矔?huì)這樣嗎?
錯(cuò)。
為了理解為什么不會(huì),你需要理解瀏覽器是如何計(jì)算高度和寬度的。Web瀏覽器在計(jì)算有效寬度時(shí)會(huì)考慮瀏覽器窗口的打開(kāi)寬度。如果你不給寬度設(shè)定任何缺省值,那瀏覽器會(huì)自動(dòng)將頁(yè)面內(nèi)容平鋪填滿整個(gè)橫向?qū)挾取?/p>
但是高度的計(jì)算方式完全不一樣。事實(shí)上,瀏覽器根本就不計(jì)算內(nèi)容的高度,除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動(dòng)條出現(xiàn))。或者你給整個(gè)頁(yè)面設(shè)置一個(gè)絕對(duì)高度。否則,瀏覽器就會(huì)簡(jiǎn)單的讓內(nèi)容往下堆砌,頁(yè)面的高度根本就無(wú)需考慮。
因?yàn)轫?yè)面并沒(méi)有缺省的高度值,所以,當(dāng)你讓一個(gè)元素的高度設(shè)定為百分比高度時(shí),無(wú)法根據(jù)獲取父元素的高度,也就無(wú)法計(jì)算自己的高度。換句話說(shuō),父元素的高度只是一個(gè)缺省值:height:
auto;。當(dāng)你要求瀏覽器根據(jù)這樣一個(gè)缺省值來(lái)計(jì)算百分比高度時(shí),只能得到undefined的結(jié)果。也就是一個(gè)null值,瀏覽器不會(huì)對(duì)這個(gè)值有任何的反應(yīng)。
上面的演示例子是父元素沒(méi)有設(shè)定固定高度,于是子元素的高度height: 100% 也不會(huì)起作用。你可以根據(jù)父元素的背景色來(lái)判斷子元素的高度不是100%。
那么,如果想讓一個(gè)元素的百分比高度height: 100%;起作用,你需要給這個(gè)元素的所有父元素的高度設(shè)定一個(gè)有效值。換句話說(shuō),你需要這樣做:
想讓這個(gè)div高度為 100% 。
現(xiàn)在你給了這個(gè)div的高度為100%,它有兩個(gè)父元素
和。為了讓你的div的百分比高度能起作用,你必須設(shè)定和的高度。這樣這個(gè)div的高度就會(huì)100%了
從這個(gè)演示中你可以看出,height: 100%;起作用了。
在使用height: 100%;時(shí)需要注意的一些事項(xiàng)
1、Margins 和 padding 會(huì)讓你的頁(yè)面出現(xiàn)滾動(dòng)條,也許這是你不希望的。
2、如果你的元素實(shí)際高度大于你設(shè)定的百分比高度,那元素的高度會(huì)自動(dòng)擴(kuò)展。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/114688.html
摘要:所以我們要同時(shí)設(shè)置這兩者的,只設(shè)置其中一個(gè)是不行的關(guān)于居中的一點(diǎn)誤解全部代碼如上,可以看到設(shè)置了為沒(méi)有居中,這是為什么呢,因?yàn)檫@時(shí)候的是相對(duì)于字體尺寸的所以直接作用于沒(méi)有絕對(duì)高度的元素是不行的。 為什么你寫(xiě)的height:100%不起作用? 這個(gè)知識(shí)不算冷門(mén)的,但是用的時(shí)候可能還是會(huì)有些懵逼,不能生效時(shí)搜一搜就能找到答案了,但是你真的懂了嗎?為什么想要設(shè)置一個(gè)全屏元素的時(shí)候,高度不受%...
摘要:在中寫(xiě)新的的時(shí)候,如果在新頁(yè)面中的模板中設(shè)置的時(shí)候一直無(wú)效。文件這時(shí)候設(shè)置是無(wú)效的,在的中發(fā)現(xiàn)仍然是設(shè)置高度時(shí),的高度會(huì)等同于其父元素的高度。而上面中為的掛載的的父節(jié)點(diǎn)是標(biāo)簽,標(biāo)簽的父節(jié)點(diǎn)是標(biāo)簽。 在vue.js中寫(xiě)新的components的時(shí)候,如果在新頁(yè)面中的模板中設(shè)置height:100%的時(shí)候一直無(wú)效。 App.vue文件 export defa...
摘要:想寫(xiě)出高效合理的布局,必須以深厚的基礎(chǔ)為前提?,F(xiàn)在布局方式主要分為三種傳統(tǒng)布局方案等配合。彈性布局,實(shí)現(xiàn)方便,兼容性較好。在環(huán)境中的元素按照如下規(guī)則渲染和文檔流一樣,元素按照自己類型的布局特性從左到右,從上往下依次排列。 前端css布局知識(shí)繁雜,實(shí)現(xiàn)方式多種多樣。想寫(xiě)出高效、合理的布局,必須以深厚的css基礎(chǔ)為前提。為了方便記憶和復(fù)習(xí),將css布局要點(diǎn)記錄如下。內(nèi)容較多,應(yīng)用方面說(shuō)的不...
閱讀 4152·2023-04-26 02:40
閱讀 2655·2023-04-26 02:31
閱讀 2746·2021-11-15 18:08
閱讀 568·2021-11-12 10:36
閱讀 1425·2021-09-30 09:57
閱讀 5192·2021-09-22 15:31
閱讀 2626·2019-08-30 14:17
閱讀 1269·2019-08-30 12:58