1. 程式人生 > >CSS高度自適應 height:100%;

CSS高度自適應 height:100%;

默認 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%;