table佈局設置高度100%無效的緣由分析及解決辦法

時間 2019-12-14

標籤 table 佈局設置高度 100% 無效緣由分析解決辦法简体版

原文原文鏈接

小編最近在使用table表格進行頁面佈局時，將表格高度設置style="height:100%"來實現表格高度滿屏效果，但在本地正常的網頁，移植在項目中就有問題了，百思不得其解。根本緣由在於瀏覽器使用用的工做模式的不一樣形成的；在Firefox與IE8標準模式下，HTML與Body標籤默認是沒有高度（即高度爲0），而是根據其中的內容自適應，若是設置表格的style="height:100%"，達不到全屏效果。html

問題分析：

有關瀏覽器工做模式大體可分爲三種：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">ui

<html xmlns="http://www.w3.org/1999/xhtml">（注意其中 Transitional 表示：Almost Standarded Mode ）spa

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

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

（4） <!DOCTYPE html>（Transitional 的簡化：Almost Standarded Mode）對象

這一看不得了，緣由在於本地頁面沒聲明，直接<html></html>，而在項目中，是<!DOCTYPE html>。圖片

解決辦法：文檔

一個對象高度是否能夠使用百分比顯示，取決於對象的父級對象，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默認有高寬度，但不推薦這種方式。