您现在的位置是：网站首页> 编程资料编程资料
w3c标准自适应高度height100%不起作用的问题分析_Web标准教程_CSS_网页制作_
2021-09-09
726人已围观
简介 Firefox中的HTML标签不是 100%高度，因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。
在以前的网页中，table用height:100%是可以整屏的，但在网页头部增加:
后就和没有用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%;以保证两个浏览器下均能够正常显示。
后就和没有用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实现的无侵入的卡盘（幻灯片）_CSS教程_CSS_网页制作_
- 关于CSS的一些基础应用_CSS教程_CSS_网页制作_
- 看懂《CSS hack浏览器兼容一览表》_浏览器兼容教程_CSS_网页制作_
- 深入分析网页CSS隐藏文字和以图换字技术_CSS教程_CSS_网页制作_
- 根据时段自动切换网站的CSS风格_CSS教程_CSS_网页制作_
- 实用的CSS常见的问题和技巧总结_CSS教程_CSS_网页制作_
- CSS也要语义化说明_CSS教程_CSS_网页制作_
- 一列固定宽度布局和背景图片绝对定位的实现代码_CSS布局实例_CSS_网页制作_
- CSS入门 XHTML文档结构树_CSS教程_CSS_网页制作_
- 快速定位页面中复杂 CSS BUG _CSS教程_CSS_网页制作_
