w3c標(biāo)準(zhǔn)自適應(yīng)高度height100%不起作用的問題分析
發(fā)布時間:2008-10-30 14:16:26 作者:佚名
我要評論

Firefox中的HTML標(biāo)簽不是 100%高度,因此給兩個標(biāo)簽都定義為height:100%;以保證兩個瀏覽器下均能夠正常顯示。
在以前的網(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%;
}
一個對象高度是否可以使用百分比顯示,取決于對象的父級對象,Table在body之中,因此它的父級是body,而瀏覽器默認(rèn)狀態(tài)下,是沒有給body一個高度屬性的,因此當(dāng)我們直接設(shè)置#left為height:100%;時,不會產(chǎn)生任何效果,而當(dāng)我們給body設(shè)置了100%之后,它的子級對象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%高度,因此給兩個標(biāo)簽都定義為height:100%;以保證兩個瀏覽器下均能夠正常顯示。
<!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%;
}
一個對象高度是否可以使用百分比顯示,取決于對象的父級對象,Table在body之中,因此它的父級是body,而瀏覽器默認(rèn)狀態(tài)下,是沒有給body一個高度屬性的,因此當(dāng)我們直接設(shè)置#left為height:100%;時,不會產(chǎn)生任何效果,而當(dāng)我們給body設(shè)置了100%之后,它的子級對象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%高度,因此給兩個標(biāo)簽都定義為height:100%;以保證兩個瀏覽器下均能夠正常顯示。
相關(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)時的基礎(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 這幾個部分。我們知道,當(dāng)一個團(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)的朋友確很少,在安裝過程中總會出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個時間把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