（从死了一次又一次终于挂掉的百度空间中抢救出来的，发表日期 2014-08-11）

原文链接：http://www.cnblogs.com/gaojun/archive/2012/05/07/2487374.html

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

<style type="text/css">

html,body{

width:100%;

height:100%;

}

<!--以下设置全屏-->

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

</style>

table布局 height=100%无效分析的更多相关文章

  1. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  2. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  3. 解决body设置height:100%无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

  4. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

  5. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  6. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

  7. 关于 iframe 在ie11 height:100% 无效的巨坑

    好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...

  8. CSS height:100%无效

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/38 浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚 ...

  9. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

随机推荐

  1. pg psql命令

    linux下使用psql命令操作数据库 下面主要用到了insert into  ,pg_dump  , pg_restore 命令 按步骤走 su postgres                   ...

  2. XSS 前端防火墙（5）： 整装待发

    到目前为止,我们把能用前端脚本防御 XSS 的方案都列举了一遍. 尽管看起来似乎很复杂累赘,不过那些是理论探讨而已,在实际中未必要都实现.我们的目标只是为了预警,能发现问题就行,并非要做到滴水不漏的程 ...

  3. Linux常用文件管理命令

    Command Description cat filename 查看文件内容. cd dirname 改变所在目录. cp file1 file2 复制文件或目录. file filename 查看 ...

  4. LoadRunner中常见参数和变量

    1.参数和字符串变量的交换 ①lr_save_string(“hello world”,“param”)         将hello world 保存在参数 param中 ②lr_eval_stri ...

  5. c++中实现委托

    成员函数指针与高性能的C++委托(上篇) 撰文:Don Clugston 引子 标准C++中没有真正的面向对象的函数指针.这一点对C++来说是不幸的,因为面向对象的指针(也叫做"闭包(clo ...

  6. LeetCode ---Anagrams() 详解

    Notice: Given an array of strings, return all groups of strings that are anagrams. Note: All inputs ...

  7. Hadoop2的简单安装

    前面花了很多时间来介绍hadoop1的安装,随着hadoop的发展,hadoop2的应用也越来越普及,hadoop2解决了hadoop1中的很多问题,比如单点故障,namenode容量小的问题. 我们 ...

  8. STL源码剖析读书笔记--第四章--序列式容器

    1.什么是序列式容器?什么是关联式容器? 书上给出的解释是,序列式容器中的元素是可序的(可理解为可以按序索引,不管这个索引是像数组一样的随机索引,还是像链表一样的顺序索引),但是元素值在索引顺序的方向 ...

  9. Python伪开发者对于搜狐云景的测评

    Python伪开发者对于搜狐云景的测评 本人是GAE和OpenShift的狂热爱好者,玩过各种国外PaaS.某次想搞个稍微复杂点的Python Web程序,需要比较好的网络传输速度,就试图找前PM(P ...

  10. Arduino1.7.10在Ubuntu下创建快捷方式

    从官网下载的arduino1.7.10版本没有快捷方式只有可执行文件arduino,通过下面的方法可以创建快捷方式 打开链接:http://www.easyicon.net/1171938-ardui ...