首页 > 代码库 > table height 100%问题

table height 100%问题

背景:做项目时候,为了省事用table布局,table高度设置成100%,不起作用

原因:

 有关浏览器工作模式大致可分为三种:Standarded Mode, Almost Standarded Mode及Quirks Mode。。。。。。

一个对象高度是否可以使用百分比显示,取决于对象的父级对象,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%问题