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默认有高宽度，但不推荐这种方式。