table布局 height=100%无效分析

admin

2014年5月18日 23:54 本文热度 7384

在使用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 Mozilla's DOCTYPE sniffing

回到问题：

一个对象高度是否可以使用百分比显示，取决于对象的父级对象，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%;

}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}