当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > w3c标准自适应高度height100%不起作用的问题分析

CSS样式表
CSS中box（盒模式）的分析
CSS2快速参考
CSS布局入门
怎么改善现有网站
display&position
表格斜线
转载：On having layout
标准化你的网页
HTML技巧汇编
动态CSS站点教程：多个页面样式提供浏览者选择
鲜为人知的CSS技巧10则
详谈 CSS样式表使用：链接/嵌入
W3C标准：实时切换CSS样式
On having layout
XHTML与HTML之间的区别
XHTML标准语法
针对浏览器隐藏CSS
CSS基础学习
130个漂亮CSS布局站点参考
css技巧十条

No. « 81 82 83 84 »

技术文章搜索

关键字

CSS样式表 中的 w3c标准自适应高度height100%不起作用的问题分析

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 162 ::
收藏到网摘: n/a

在以前的网页中，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%的属性，这是高度自适应问题的关键所在。

复制代码
代码如下:

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%;以保证两个浏览器下均能够正常显示。