標籤：ref 空白 meta color html 屬性 class blog 頁面
在初次嘗試高度自適應時都會遇到這樣的問題：
對象的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%;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
