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