css 高度自適應的問題示例探討
發(fā)布時間：2013-09-04 16:20:51 作者：佚名 
我要評論
我要評論對象height:100%并不能直接產(chǎn)生效果，是因為跟其父對象有關，下面有個示例為大家詳細介紹下，感興趣的朋友可以參考下
對象height:100%并不能直接產(chǎn)生效果，是因為跟其父對象有關。
#center{
height:100%;
}
上面的css樣式是無效的，不會產(chǎn)生任何效果。
需要改寫：
html,body{
margin:0px;
height:100%;
}
#center{
width:200px;
height:100%;
background-color:#666666;
border:1px solid red;
}
對#center對象設置了height:100%,同時設置了html與body的height：100%，這就是高度自適應的問題所在，一個對象的高度是否可以使用百分之比顯示，取決于對象的父類對象，在頁面中，#center直接放在body屬性中，因此它的父類對象是body，而在默認狀態(tài)下，瀏覽器并沒有給body一個高度屬性，因此我們所設置的#centere為height：100%并不會產(chǎn)生任何效果，但是一點我們給body設置了100%之后，他的子類對象#center的height:100%便發(fā)生作用了，這便是瀏覽器解析規(guī)則引發(fā)的高度自適應的問題。
代碼中除了給出body的定義屬性之外，還給html對象也應用了相同的樣式定義，這樣做的好處是使IE與firefox瀏覽器都能夠高度自適應，Ie與firefox對頁面的解析存在一定的差異，ie中html對象默認為100%的高度，而body不是，而在firefox中html標簽就不是100%的高度，因此兩個標簽都設置為100%,可以保證兩款瀏覽器都能正常工作。
復制代碼
代碼如下:#center{
height:100%;
}
上面的css樣式是無效的，不會產(chǎn)生任何效果。
需要改寫：
復制代碼
代碼如下:html,body{
margin:0px;
height:100%;
}
#center{
width:200px;
height:100%;
background-color:#666666;
border:1px solid red;
}
對#center對象設置了height:100%,同時設置了html與body的height：100%，這就是高度自適應的問題所在，一個對象的高度是否可以使用百分之比顯示，取決于對象的父類對象，在頁面中，#center直接放在body屬性中，因此它的父類對象是body，而在默認狀態(tài)下，瀏覽器并沒有給body一個高度屬性，因此我們所設置的#centere為height：100%并不會產(chǎn)生任何效果，但是一點我們給body設置了100%之后，他的子類對象#center的height:100%便發(fā)生作用了，這便是瀏覽器解析規(guī)則引發(fā)的高度自適應的問題。
代碼中除了給出body的定義屬性之外，還給html對象也應用了相同的樣式定義，這樣做的好處是使IE與firefox瀏覽器都能夠高度自適應，Ie與firefox對頁面的解析存在一定的差異，ie中html對象默認為100%的高度，而body不是，而在firefox中html標簽就不是100%的高度，因此兩個標簽都設置為100%,可以保證兩款瀏覽器都能正常工作。
相關文章
純Css實現(xiàn)Div高度根據(jù)自適應寬度（百分比）調整
這篇文章主要介紹了純Css實現(xiàn)Div高度根據(jù)自適應寬度（百分比）調整，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2020-07-16css和css3彈性盒模型實現(xiàn)元素寬度（高度）自適應
這篇文章主要介紹了css和css3彈性盒模型實現(xiàn)元素寬度（高度）自適應的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋2019-05-15CSS min-height IE6、IE7、FF下DIV自適應高度
IE6、IE7、FF下DIV自適應高度2010-05-13- 翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根據(jù)我的理解改了，讓一些初心者更好理解。2009-11-12
- 用css控制textarea文本域的高度隨內容的變化而變化,不出現(xiàn)滾動條.2009-07-11
- 今天有人問起，晚上試著寫出來，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。 從最簡單的開始………… 一、如何讓一個DIV水平居2009-04-04
CSS 實現(xiàn)高度自適應鋪滿整屏的實現(xiàn)
這篇文章主要介紹了CSS 實現(xiàn)高度自適應鋪滿整屏的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-11-23