（从死了一次又一次终于挂掉的百度空间中抢救出来的，发表日期 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. RMAN duplicate from active遇到ora-17167,ora-12154

    最近在从活动数据库进行异机克隆时碰到了ORA-17629,ORA-17627,ORA-12154的错误,起初以为是一个Bug呢.Oracle Bug着实太多了,已经成了习惯性思维了.汗!错误提示是无法 ...

  2. 【转】安装Django

    原文网址:http://www.crifan.com/record_install_django/ 1.参考Quick install guide,最终找到下载的地址: http://bitnami. ...

  3. 自定义视图一：扩展现有的视图，添加新的XML属性

    这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! 简介 这个系列详细的介绍了如何穿件Android自定义视图.主要涉及的内容有如何绘制内容,layout和measure的原理,如何继承 ...

  4. CentOS安装tomcat

    一.下载Tomcat 1..进入Tomcat官网:http://tomcat.apache.org/ 左侧选择相应的版本 点击Tomcat 6.0后 点击tar.gz下载apache-tomcat-6 ...

  5. hdu 4643（计算几何）

    题意:容易理解 分析:切换的地点为两个基站所在直线的中垂线与两座城市所在直线的交点. 代码实现: #include <cstdio> #include <cmath> #inc ...

  6. cocoa NSFileManager

    NSFileManager中包含了用来查询单词库目录.创建.重命名.删除目录以及获取/设置文件属性的方法(可读性,可编写性等等). 每个程序都会有它自己的沙盒,通过它你可以阅读/编写文件.写入沙盒的文 ...

  7. GIT 命令 操作 记录

    1.git pull时冲突的解决 1.git stash 2.git pull 3.git stash pop stash@{0} 4.修改冲突 5.git add . 6.git commit 7. ...

  8. 【c++】输出 0000,0001,0002,0003,0004...这样的字符串

    #include <iostream> #include <iomanip> ; ){ stringstream buf; buf <<setfill()<& ...

  9. fscanf的返回值未成功输入的元素个数 .xml

    pre{ line-height:1; color:#38ede1; background-color:#5b2814; font-size:16px;}.sysFunc{color:#008080; ...

  10. 虚幻4以及DX12将允许开发者利用Xbox One的更多性能（转）

    GamingBolt 最近采访了 Epic Games 的总经理 Ray Davis,讨论了有关旗下虚幻引擎(Unreal Engine)的议题.在这次的访谈中,Ray 解释了关于使用 DirectX ...