（从死了一次又一次终于挂掉的百度空间中抢救出来的，发表日期 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. click和onclick的区别

    onclick是绑定事件,click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,下面有个示例,大家可以看看   Html代码 ? 1 2 3 4 5 6 7 8 9 1 ...

  2. 比赛组队问题 --- 递归解法 --- java代码 --- 八皇后问题

    两队比赛,甲队为A.B.C3人,乙队为X.Y.Z3人.已知A不和X比,C不和X.Z比,请编程序找出3队赛手名单 采用了与八皇后问题相似的解法,代码如下: 如有疑问请链接八皇后问题的解法:http:// ...

  3. dedecms list 判断 每隔3次输出内容

    {dede:list pagesize='12' runphp='yes'} [field:global name=autoindex runphp="yes"](@me%3==0 ...

  4. jszs 历史管理

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. ArcGIS Desktop打开慢的解决办法

    问题:ArcGIS Desktop打开巨慢,不管是ArcMap还是CataLog都是一样的,打开一次有时候需要10多分钟. 解决方法:C:\Users\[用户名]\AppData\Roaming\ES ...

  6. DataTrigger的几个用法

    1.用在textbox等输入控件上,验证输入是否合法. <Window.Resources> <Style TargetType="TextBox"> &l ...

  7. 类似于QQ游戏百万人同时在线的服务器架构实现

    http://blog.csdn.net/sodme/article/details/213995 —————————————————————————————————————————————————— ...

  8. AndroidStudio debug

    1. view as text

  9. POJ 1584 A Round Peg in a Ground Hole（判断凸多边形，点到线段距离，点在多边形内）

    A Round Peg in a Ground Hole Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4438   Acc ...

  10. c语言指针详解(转载)

    转自(http://blog.csdn.net/ad_ad_ad/article/details/1522145) 指针是C语言中广泛使用的一种数据类型. 运用指针编程是C语言最主要的风格之一.利用指 ...