w3c標(biāo)準(zhǔn)自適應(yīng)高度height100%不起作用的問題分析
發(fā)布時(shí)間：2008-10-30 14:16:26 作者：佚名 
我要評論
我要評論Firefox中的HTML標(biāo)簽不是 100%高度，因此給兩個(gè)標(biāo)簽都定義為height:100%;以保證兩個(gè)瀏覽器下均能夠正常顯示。
在以前的網(wǎng)頁中，table用height:100%是可以整屏的，但在網(wǎng)頁頭部增加:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
后就和沒有用height:100%一樣了，后來發(fā)現(xiàn)要給html,body都增加height:100%的屬性，這是高度自適應(yīng)問題的關(guān)鍵所在。
html,body{
margin:0px;
height:100%;
}
一個(gè)對象高度是否可以使用百分比顯示，取決于對象的父級(jí)對象，Table在body之中，因此它的父級(jí)是body，而瀏覽器默認(rèn)狀態(tài)下，是沒有給body一個(gè)高度屬性的，因此當(dāng)我們直接設(shè)置#left為height:100%;時(shí)，不會(huì)產(chǎn)生任何效果，而當(dāng)我們給body設(shè)置了100%之后，它的子級(jí)對象Table的height:100%;便發(fā)生作用了，這便是瀏覽器解析規(guī)則引發(fā)的高度自適應(yīng)問題。而代碼中除了給body應(yīng)用之外，還給 HTML對象也應(yīng)用相同的樣式設(shè)計(jì)，這樣做的好處是使IE與firefox瀏覽器都能夠?qū)崿F(xiàn)高度自適應(yīng)。另外，F(xiàn)irefox中的HTML標(biāo)簽不是 100%高度，因此給兩個(gè)標(biāo)簽都定義為height:100%;以保證兩個(gè)瀏覽器下均能夠正常顯示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
后就和沒有用height:100%一樣了，后來發(fā)現(xiàn)要給html,body都增加height:100%的屬性，這是高度自適應(yīng)問題的關(guān)鍵所在。
復(fù)制代碼
代碼如下:html,body{
margin:0px;
height:100%;
}
一個(gè)對象高度是否可以使用百分比顯示，取決于對象的父級(jí)對象，Table在body之中，因此它的父級(jí)是body，而瀏覽器默認(rèn)狀態(tài)下，是沒有給body一個(gè)高度屬性的，因此當(dāng)我們直接設(shè)置#left為height:100%;時(shí)，不會(huì)產(chǎn)生任何效果，而當(dāng)我們給body設(shè)置了100%之后，它的子級(jí)對象Table的height:100%;便發(fā)生作用了，這便是瀏覽器解析規(guī)則引發(fā)的高度自適應(yīng)問題。而代碼中除了給body應(yīng)用之外，還給 HTML對象也應(yīng)用相同的樣式設(shè)計(jì)，這樣做的好處是使IE與firefox瀏覽器都能夠?qū)崿F(xiàn)高度自適應(yīng)。另外，F(xiàn)irefox中的HTML標(biāo)簽不是 100%高度，因此給兩個(gè)標(biāo)簽都定義為height:100%;以保證兩個(gè)瀏覽器下均能夠正常顯示。
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化，要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面詳細(xì)內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流，文章內(nèi)容圍繞主題展相關(guān)資料，需要的小伙伴可以參考一下，希望對你有所幫助2022-02-23- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范，用于鞏固對html，css頁面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道，當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團(tuán)隊(duì)遵循和約定的代碼書寫規(guī)范，意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0，但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少，在安裝過程中總會(huì)出現(xiàn)這樣那樣的問題，基于這些問題，下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29
