當你設置一個頁面元素的高度(height)為100%時，期望這樣元素能撐滿整個瀏覽器窗口的高度，但大多數情況下，這樣的做法沒有任何效果。你知道為什麽height:100%不起作用嗎？

按常理，當我們用CSS的height屬性定義一個元素的高度時，這個元素應該按照設定在瀏覽器的縱向空間裏擴展相應的空間距離。例如，如果一個div元素的CSS是height: 100px;，那它應該在頁面的豎向空間裏占滿100px的高度。

而跟W3C的規範，百分比的高度在設定時需要根據這個元素的父元素容器的高度。所以，如果你把一個div的高度設定為height: 50%;，而它的父元素的高度是100px，那麽，這個div的高度應該是50px。

所以需要定義父容器的高度，height:100%是根據父容器來定義的

下面一個彈性盒布局

我們期望的是 頭部占一分，主體占八份，底部占一份，但是你會發現並不是你需要的結果

而是

那麽如何實現類似webApp中的，頭部 主體 底部的布局那

只需要在css中設置html,body的高度

然後你會發現布局變化了，類型webApp的布局

關於height:100%不生效的問題