table布局 height=100%無效分析

admin

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

在使用table表格進行頁面布局時，經常使用將表格高度設置style="height:100%"來實現表格高度滿屏效果，但在最新的瀏覽器中經常遇到無效，根本原因再于瀏覽器使用用的工作模式的不同造成的；在Firefox與IE8標準模式下，HTML與Body標簽默認是沒有高度（即高度為0），而是根據其中的內容自適應，如果設置表格的style="height:100%"，達不到全屏效果。

問題分析：

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

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

（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 的簡化：Almost Standarded Mode）

獲取更多有關DOCTYPE信息請查看：W3C DOCTYPE

回到問題：

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

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

html,body{

width:100%;

height:100%;

}