我們在設定width:100%時可以橫向佔滿全屏，但是設定height:100%確沒有任何作用，舉個例子：
html><
html>
<
headlang="en">
<
metacharset="utf-8">
<
title>
title>
<
style>
#d1
style>
head>
<
body>
<
divid="d1">我是高度100%
div>
body>
html>
效果圖如下：
如果高度起作用的話，背景色應該佔滿全屏，而現在只是內容的高度。
原因如下：
web瀏覽器在計算有效寬度時會考慮瀏覽器視窗的開啟寬度。如果你不給寬度設定任何預設值，那瀏覽器會自動將頁面內容平鋪填滿整個橫向寬度。
但是高度的計算方式完全不一樣。事實上，瀏覽器根本就不計算內容的高度，除非內容超出了視窗範圍(導致滾動條出現)。或者你給整個頁面設定乙個絕對高度。否則，瀏覽器就會簡單的讓內容往下堆砌，頁面的高度根本就無需考慮。
因為頁面並沒有預設的高度值，所以，當你讓乙個元素的高度設定為百分比高度時，無法根據獲取父元素的高度，也就無法計算自己的高度。換句話說，父元素的高度只是乙個預設值：height: auto;。當你要求瀏覽器根據這樣乙個預設值來計算百分比高度時，只能得到undefined的結果。也就是乙個null值，瀏覽器不會對這個值有任何的反應。
解決方法：
html,body為了使乙個元素的height:100%起作用，需要讓他的所有的父元素高度為100%。magin 和padding的作用是為了不出現滾動條。
效果圖如下：
height 100 不起作用！
近日小夥伴們，在布局的是需要用到將某個div全屏鋪滿！無論怎麼使用height屬性，都無法滿足自己的要求！讓我回憶起自己第一次遇到這樣的布局需求，也繞了不少彎路！今天就記錄一下！以免自己日後忘卻！任務需求 將div寬高鋪滿全屏！先準備乙個簡單的html布局 lang en charset utf 8...
談談對height 100 的看法
1 如果該元素height 100 但是其直接父元素的高度未設定，而該元素祖父元素的高度設定了，那它多高？type text css one three style head one two three div div div body html 結果 解釋 我給祖父元素加padding的目的是告訴...
對height 100 和inherit的總結
部落格主頁 正文 之前看到一篇相關的文章 在看這個文章的demo時發現一些問題，下面來總結歸納一下 如下 效果大致是這個樣子 其中，左邊的是height 100 右邊的是height inherit。下面我們進行一下改動 其實就是給兩個子元素加上絕對定位。效果如圖 我們發現，100 的元素的高度計算...