作家
登录

w3c标准自适应高度height100%不起作用的问题分析

作者: 来源:www.28hudong.com 2012-11-19 22:45:26 阅读 我要评论

在以前的网页中,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%;以保证两个浏览器下均能够正常显示。

  推荐阅读

  CSS网页设计:百分比进行背景图片定位

此文为后来的教程做铺垫,转自这儿。百分数定位很有意思,可以实现非凡的效果。大部分人应该习惯于使用描述性词语(left、top、center&hellip;)或者数值(20px、1em&hellip;)对背景图片定位,百分比可能比较少>>>详细阅读


本文标题:w3c标准自适应高度height100%不起作用的问题分析

地址:http://www.17bianji.com/kaifa2/CSS/17135.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)