本文同時(shí)發(fā)表在https://github.com/zhangyachen/zhangyachen.github.io/issues/38

瀏覽器根本就不計(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è)定為百分比高度時(shí)，無法根據(jù)獲取父元素的高度，也就無法計(jì)算自己的高度。換句話說，父元素的高度只是一個(gè)缺省值：height: auto;。當(dāng)你要求瀏覽器根據(jù)這樣一個(gè)缺省值來計(jì)算百分比高度時(shí)，只能得到undefined的結(jié)果。也就是一個(gè)null值，瀏覽器不會(huì)對(duì)這個(gè)值有任何的反應(yīng)。

解決方法：給父元素設(shè)置一個(gè)高度的有效值

參考：http://www.webhek.com/css-100-percent-height

轉(zhuǎn)載于:https://www.cnblogs.com/zhangyachen/p/8035683.html

總結(jié)

以上是生活随笔為你收集整理的CSS height:100%无效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。