table布局 height=100%无效分析

(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 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>
时间: 2024-11-08 21:29:38

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

IE下iframe height=&quot;100%&quot;无效的解决方法

IE7下iframe height="100%"无效的解决方法就是css如下写法: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml&q

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

好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货的资料,到最后,发现并没有卵用,没有找到问题的重点: 甚至搜索到请求头要设置X-Frame-Options这个参数的点上去了,顺带说说,X-Frame-Options这个参数: 有时候为了防止网页被别人的网站iFrame,我们可以通过在服务器设置HTTP头部中的X-Frame-Options信息使用

table height 100%问题

背景:做项目时候,为了省事用table布局,table高度设置成100%,不起作用 原因: 有关浏览器工作模式大致可分为三种:Standarded Mode, Almost Standarded Mode及Quirks Mode...... 一个对象高度是否可以使用百分比显示,取决于对象的父级对象,Table在body之中,因此它的父级是body,而浏览器在标准模式下,是没有给body一个高度属性的,因此当设置height:100%;时,不会产生任何效果(内容根据高度自适应),而当给body设置

css height:100% 为什么失效

在网页设计中,table用height:100%是可以整屏的,但需要在网页头部增加: <!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"> 后就和没

height:100%不起作用(无效),div全屏

当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段代码. 下面给个div全屏的示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> htm

解决html设置height:100%无效的问题

通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, body{ margin:0; height:100%; }即可. 原因:你让div的height="100%",执行网页时,css先执行到,而整个网页中的内容还没有完全载入,是获取不到div外面的<body>等的高度的,所以height="100%"也就不

zbb20170927 jquery easyui 布局问题,把style=&quot;height:100%;&quot; 设置成按分辨的百分比,后不显示为你痛

增加代码  data-options="fit:true" 可解决问题 <div id="cc" class="easyui-layout" data-options="fit:true" style="width: 100%; height: 100%;"> <div data-options="region:'north',title:'North Title',split:

纯CSS 实现DIV 高度 height 100% 全屏布局

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> *{ margin: 0; padding:0;

为什么不建议用Table布局

Tables的缺点 1.Table要比其它html标记占更多的字节.(延迟下载时间,占用服务器更多的流量资源.) 2.Tablle会阻挡浏览器渲染引擎的渲染顺序.(会延迟页面的生成速度,让用户等待更久的时间.) 3.Table里显示图片时需要你把单个.有逻辑性的图片切成多个图.(增加设计的复杂度,增加页面加载时间,增加HTTP会话数.) 4.在某些浏览器中Table里的文字的拷贝会出现问题.(这会让用户不悦.) 5.Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height