在前端瀏覽器的頁面加滾動(dòng)條時(shí)搔预，想要設(shè)置高度百分之百霹期，之后垂直滾動(dòng)條不出來，而設(shè)置px卻好使拯田。
這塊沒有截圖历造。。船庇。吭产。。（因?yàn)槲沂墙鉀Q了問題之后總結(jié)）
HTML中塊級(jí)元素設(shè)置height:100%的實(shí)現(xiàn)
當(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挟裂。
當(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ù)計(jì)算方式完全不一樣僵腺。事實(shí)上瀏覽器根本就不計(jì)算內(nèi)容的高度鲤孵，除非內(nèi)容超出了視窗范圍(導(dǎo)致滾動(dòng)條出現(xiàn))〕饺纾或者你給整個(gè)頁面設(shè)置一個(gè)絕對(duì)高度普监，否則，瀏覽器就會(huì)簡(jiǎn)單的讓內(nèi)容往下堆砌丧没，頁面的高度就無需考慮鹰椒。因?yàn)轫撁娌]有缺省的高度值，所以當(dāng)你讓一個(gè)元素的高度設(shè)定為百分比呕童，無法獲取到父級(jí)的高度漆际，自然也無法計(jì)算自己的高度。換句話說父元素的高度只是一個(gè)缺省值: heightauto.當(dāng)你要求瀏覽器根據(jù)這樣一個(gè)缺省值來計(jì)算百分比高度時(shí)夺饲，只能得到undefined的結(jié)果奸汇。也就是一個(gè)null值，瀏覽器不會(huì)對(duì)這個(gè)值有任何的反應(yīng)往声。
父元素沒有設(shè)定固定高度擂找，于是子元素的高度height:100%也不會(huì)起作用。
那么浩销，如果想讓一個(gè)元素的百分比高度: height:100%起作用贯涎，你需要給這個(gè)元素的所有父級(jí)元素的
高度都設(shè)定一個(gè)值。
換句話說慢洋，需要給??? body和html元素的高度都設(shè)置為height:100%下面的div的高度
的百分比才會(huì)生效
body,html?{??width:?100%;??height:?100%;}
