CSS高度自適應 height:100%;
阿新 • • 發佈：2017-07-30
默認 blog logs 但是 style 放置 htm ctype 瀏覽器
在初次嘗試高度自適應時都會遇到這樣的問題：
對象的heith:100%; 並不能直接產生實際效果
為什麽呢？
之所以沒有效果,與瀏覽器的解析方式有一定關系,查看下面代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一列布局</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; }/*這裏是關鍵*/ #layout { background-color: #cccccc; /*border: 2px solid #333333;*/ margin: 0 auto; width: 80%; height: 100%; }</style> </head> <body> <div id="layout"></div> </body> </html>
一個對象的高度是否可以使用百分比顯示,取決於對象的父級對象.在頁面中,#layout 是直接放置在body之中,因此它的父級對象
是body,在默認狀態下,瀏覽器並沒有給bodyy一個高度屬性,因此我們所設置的#layout為height:100%;並不會產生任何效果.但是
一旦我們給body設置了100%之後,它的子級對象#layout 的height:100%;便發生了作用了,這便是瀏覽器解析規則引發的高度自適應
問題.
代碼中除了給body定義了100%之外,還給html對象也應用了想吐的樣式定義,這樣做的好處是,使用IE與firefox瀏覽器都能夠實現
高度自適應,IE與firefox對頁面對象的解析方式存在一定差異.在IE中,html對象默認為100%的高度，body卻不是.而在firefox中,
html標簽卻不是100%高度,因此我們給兩個標簽都定義為height:100%;，這樣可以保證兩款瀏覽器下均能夠正常工作.
註：float元素 空白邊不疊加
CSS高度自適應 height:100%;