table布局 height=100%無(wú)效分析

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2014年5月18日 23:54 本文熱度 7505

在使用table表格進(jìn)行頁(yè)面布局時(shí)，經(jīng)常使用將表格高度設(shè)置style="height:100%"來(lái)實(shí)現(xiàn)表格高度滿屏效果，但在最新的瀏覽器中經(jīng)常遇到無(wú)效，根本原因再于瀏覽器使用用的工作模式的不同造成的；在Firefox與IE8標(biāo)準(zhǔn)模式下，HTML與Body標(biāo)簽?zāi)J(rèn)是沒有高度（即高度為0），而是根據(jù)其中的內(nèi)容自適應(yīng)，如果設(shè)置表格的style="height:100%"，達(dá)不到全屏效果。

問題分析：

有關(guān)瀏覽器工作模式大致可分為三種：Standarded Mode， Almost Standarded Mode及Quirks Mode，其中Standarded Mode最為嚴(yán)格，即頁(yè)面要求最規(guī)范，最符合W3C標(biāo)準(zhǔn)，又稱為Strict Mode；Quirks Mode是指瀏覽器模擬早期瀏覽器版本，為了適應(yīng)早期頁(yè)面中不規(guī)范的標(biāo)簽等；Almost Standarded Mode是當(dāng)前使用最廣泛的工作模式，是一種由不規(guī)范到規(guī)范過渡（其實(shí)它與Standarded Mode區(qū)別并不大，僅在圖片顯示及少量腳本解析上存在差異）。以上三種模式是由頁(yè)面最開始的<!DOCTYPE>（文檔對(duì)象類型）定義的，瀏覽器在加載頁(yè)面時(shí)，首先根據(jù)文檔對(duì)象類型定義來(lái)判斷當(dāng)前頁(yè)面是應(yīng)該使用哪種工作模式來(lái)渲染頁(yè)面以達(dá)到頁(yè)面定義者的預(yù)期效果。

常見 HTML中<!DOCTYPE>（文檔對(duì)象類型）有：

（1）<!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">（注意其中 Transitional 表示：Almost Standarded Mode ）

（2）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">（表示：Standarded Mode ）

（3）未寫<!DOCTYPE>聲明，或<!DOCTYPE >聲明書寫有誤，則工作在Quriks Mode

（4） <!DOCTYPE html>（Transitional 的簡(jiǎn)化：Almost Standarded Mode）

獲取更多有關(guān)DOCTYPE信息請(qǐng)查看：W3C DOCTYPE

回到問題：

一個(gè)對(duì)象高度是否可以使用百分比顯示，取決于對(duì)象的父級(jí)對(duì)象，Table在body之中，因此它的父級(jí)是body，而瀏覽器在標(biāo)準(zhǔn)模式下，是沒有給body一個(gè)高度屬性的，因此當(dāng)設(shè)置height:100%;時(shí)，不會(huì)產(chǎn)生任何效果（內(nèi)容根據(jù)高度自適應(yīng)），而當(dāng)給body設(shè)置了100%之后（相對(duì)于html標(biāo)簽），它的子級(jí)對(duì)象Table的height:100%;便發(fā)生作用了，這便是瀏覽器解析規(guī)則引發(fā)的高度自適應(yīng)問題。值得注意：Firefox中的HTML標(biāo)簽不是 100%高度，因此給兩個(gè)標(biāo)簽都定義為height:100%;以保證兩個(gè)瀏覽器下均能夠正常顯示。

解決方案：（1）為<html>與<body>標(biāo)簽添加100%的高寬屬性。（2）可直接刪除<!DOCTYPE>定義，這樣瀏覽器會(huì)工作在Quriks Mode下，body與html默認(rèn)有高寬度，但不推薦這種方式

html,body{

width:100%;

height:100%;

}