（从死了一次又一次终于挂掉的百度空间中抢救出来的，发表日期 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. 获取当前匹配元素 包括自身的html

    $(".test").prop("outerHTML"); 来自为知笔记(Wiz)

  2. poj 2661 Factstone Benchmark (Stirling数)

    //题意是对于给定的x,求满足n! <= 2^(2^x)的最大的n//两边同取以二为底的对数,可得: lg2(n!) <= 2^x 1.   log2(n!) = log2(1) + lo ...

  3. Linux/Unix shell 脚本中调用SQL,RMAN脚本

    Linux/Unix shell脚本中调用或执行SQL,RMAN 等为自动化作业以及多次反复执行提供了极大的便利,因此通过Linux/Unix shell来完成Oracle的相关工作,也是DBA必不可 ...

  4. js浮点数运算需要注意的问题

    最近在js运算浮点数时发现了一个问题.问题是这样的:js函数中处理两个浮点数的相加,为了防止出现0.1+0.2=0.30000000000000004的问题,两个数都先乘以10000后再相加,得到结果 ...

  5. 页面异步加载javascript文件

    昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() {  var ga = document.createElement('script'); ga.type ...

  6. DB2因表空间不够产生load表失败

    今天下午恢复表的时候发现出现错误: SQL3520W  Load Consistency Point was successful. SQL3110N  The utility has complet ...

  7. SORT UNIQUE|AGGREGATE|GROUP BY|ORDER BY|JOIN

    相信做oracle开发和管理的朋友对sort肯定不会陌生,大家通常都遇到这样那样的排序性能问题,所以我写这一系列关于sort的文章告诉大家在oracle里面sort是怎么一回事以及如果调整sort获得 ...

  8. SQL查询数据库信息, 数据库表名, 数据库表信息

    SQL查询数据库信息, 数据库表名, 数据库表信息 ---------------------------------------------- -- 以下例子, 在sql_server 中可以直接运 ...

  9. AsyncTask简单获取网络图片的例子

    //首先呢,添加网络权限 android.permission.INTERNET //然后,布局View img=(Image)findViewById(R.id.imageView1); btn=( ...

  10. C#的默认编码

    C# 的所有源代码文件,默认编码为 UTF-8,注意,是源代码文件,而不是 C# 中的 string. C# 中的所有 string,默认编码均为 Unicode (UTF-16). C# 产生的 A ...