w3c标准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%一样了,后来发现要给html,body都增加height:100%的属性,这是高度自适应问题的关键所在。

高度自适应的CSS代码:
html,body{
      margin:0px;
    
 height:100%;
}

一个对象高度是否可以使用百分比显示,取决于对象的父级对象,Table在body之中,因此它的父级是body,而浏览器默认状态下,是没有给body一个高度属性的,因此当我们直接设置#left为height:100%;时,不会产生任何效果,而当我们给body设置了100%之后,它的子级对象Table的height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外,还给
HTML对象也应用相同的样式设计,这样做的好处是使IE与firefox浏览器都能够实现高度自适应。另外,Firefox中的HTML标签不是
100%高度,因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示

 

1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
的问题。

因为这里声明了你的文档符合html
4.0 标准。而此标准当中, table没有height属性

2.

其实只要把body标签的样式设为100%,这样其他的元素都会以它为标准的了
<body
style="height:100%;margin:0px;">
<table width="100%"
height="100%">

而且去掉文件头上的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

同时如果是表格嵌表格,要每个父表格都要设style="height:100%"

 

<div id="div1" style="Z-INDEX: 1; OVERFLOW: auto; WIDTH: 100%;height:100%"
>不出现滚动条,因为它的父级容易没有设置 height="100%"

此条目发表在article分类目录,贴了标签。将固定链接加入收藏夹。