當(dāng)你設(shè)置一個(gè)頁面元素的高度(height)為100%時(shí)，期望這樣元素能撐滿整個(gè)瀏覽器窗口的高度叹话，但大多數(shù)情況下凌停，這樣的做法沒有任何效果。你知道為什么
height:100%不起作用嗎圈盔？按常理豹芯，當(dāng)我們用CSS的height屬性定義一個(gè)元素的高度時(shí)，這個(gè)元素應(yīng)該按照設(shè)定在瀏覽器的縱向空間里擴(kuò)展相應(yīng)的空間距離驱敲。例如铁蹈，如果一個(gè)
div元素的CSS是height: 100px;，那它應(yīng)該在頁面的豎向空間里占滿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è)頁面時(shí)，你在里面放置了一個(gè)
div元素掸冤，你希望它占滿整個(gè)窗口高度厘托，最自然的做法，你會(huì)給這個(gè)div添加height: 100%;的css屬性稿湿。然而铅匹，如果你要是設(shè)置寬度為width: 100%;，那這個(gè)元素的寬度會(huì)立刻擴(kuò)展到窗口的整個(gè)橫向?qū)挾冉忍佟８叨纫矔?huì)這樣嗎包斑？
錯(cuò)流礁。
為了理解為什么不會(huì)，你需要理解瀏覽器是如何計(jì)算高度和寬度的罗丰。Web瀏覽器在計(jì)算有效寬度時(shí)會(huì)考慮瀏覽器窗口的打開寬度神帅。如果你不給寬度設(shè)定任何缺省值，那瀏覽器會(huì)自動(dòng)將頁面內(nèi)容平鋪填滿整個(gè)橫向?qū)挾取?/p>
但是高度的計(jì)算方式完全不一樣萌抵。事實(shí)上找御，瀏覽器根本就不計(jì)算內(nèi)容的高度，除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動(dòng)條出現(xiàn))绍填■Γ或者你給整個(gè)頁面設(shè)置一個(gè)絕對(duì)高度。否則讨永，瀏覽器就會(huì)簡單的讓內(nèi)容往下堆砌滔驶，頁面的高度根本就無需考慮。
因?yàn)轫撁娌]有缺省的高度值卿闹，所以瓜浸，當(dāng)你讓一個(gè)元素的高度設(shè)定為百分比高度時(shí)，無法根據(jù)獲取父元素的高度比原，也就無法計(jì)算自己的高度插佛。換句話說，父元素的高度只是一個(gè)缺省值：
height: auto;量窘。當(dāng)你要求瀏覽器根據(jù)這樣一個(gè)缺省值來計(jì)算百分比高度時(shí)雇寇，只能得到undefined的結(jié)果。也就是一個(gè)null值蚌铜，瀏覽器不會(huì)對(duì)這個(gè)值有任何的反應(yīng)锨侯。-
那么，如果想讓一個(gè)元素的百分比高度height: 100%;起作用冬殃，你需要給這個(gè)元素的所有父元素的高度設(shè)定一個(gè)有效值囚痴。換句話說，你需要這樣做：
<html> <body> <div style="height: 100%;"> <p> 想讓這個(gè)div高度為 100% 审葬。 </p> </div> </body> </html> -
現(xiàn)在你給了這個(gè)div的高度為100%深滚，它有兩個(gè)父元素<body>和<html>。為了讓你的div的百分比高度能起作用涣觉，你必須設(shè)定<body>和<html>的高度痴荐。
<html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 這樣這個(gè)div的高度就會(huì)100%了 </p> </div> </body> </html> 在使用height: 100%;時(shí)需要注意的一些事項(xiàng)
1、Margins 和 padding 會(huì)讓你的頁面出現(xiàn)滾動(dòng)條官册，也許這是你不希望的生兆。
2、如果你的元素實(shí)際高度大于你設(shè)定的百分比高度膝宁，那元素的高度會(huì)自動(dòng)擴(kuò)展鸦难。
