div高度自适应的问题
2015-09-04 16:00
232 查看
对象height:100%并不能直接产生效果,是因为跟其父对象有关。
上面的css样式是无效的,不会产生任何效果。
需要改写:
对#center对象设置了height:100%,同时设置了html与body的height:100%,这就是高度自适应的问题所在,一个对象的高度是否可以使用百分之比显示,取决于对象的父类对象,在页面中,#center直接放在body属性中,因此它的父类对象是body,而在默认状态下,浏览器并没有给body一个高度属性,因此我们所设置的#centere为height:100%并不会产生任何效果,但是一但我们给body设置了 100%之后,他的子类对象#center的height:100%便发生作用了,这便是浏览器解析规则引发的高度自适应的问题。
代码中除了给出body的定义属性之外,还给html对象也应用了相同的样式定义,这样做的好处是使IE与firefox浏览器都能够高度自适应,Ie与firefox对页面的解析存在一定的差异,ie中html对象默认为100%的高度,而body不是,而在firefox中html标签就不是100%的高度,因此两个标签都设置为100%,可以保证两款浏览器都能正常工作。
#center{ height:100%; }
上面的css样式是无效的,不会产生任何效果。
需要改写:
html,body{ margin:0px; height:100%; } #center{ width:200px; height:100%; background-color:#666666; border:1px solid red; }
对#center对象设置了height:100%,同时设置了html与body的height:100%,这就是高度自适应的问题所在,一个对象的高度是否可以使用百分之比显示,取决于对象的父类对象,在页面中,#center直接放在body属性中,因此它的父类对象是body,而在默认状态下,浏览器并没有给body一个高度属性,因此我们所设置的#centere为height:100%并不会产生任何效果,但是一但我们给body设置了 100%之后,他的子类对象#center的height:100%便发生作用了,这便是浏览器解析规则引发的高度自适应的问题。
代码中除了给出body的定义属性之外,还给html对象也应用了相同的样式定义,这样做的好处是使IE与firefox浏览器都能够高度自适应,Ie与firefox对页面的解析存在一定的差异,ie中html对象默认为100%的高度,而body不是,而在firefox中html标签就不是100%的高度,因此两个标签都设置为100%,可以保证两款浏览器都能正常工作。
相关文章推荐
- DIR 命令 详解
- C++基础---浅层及深层拷贝构造函数
- 猜数字 -- 暴力法
- 就近调用原则
- iOS:UIScrollView控件和UIPageControl控件的详解
- POJ_3616 Milking Times(DP)
- CCF-出现次数最多的数-201312-1
- 【dfs+回溯】hdu 2553 N皇后问题
- 和为s的连续正整数序列
- 提高django model效率的几个小方法
- sprintf 和sccanf
- 01-复杂度2 Maximum Subsequence Sum (25分)
- test
- 注解SpringMVC
- 日期选择器
- HDU1037 - Keep on Truckin' (简单题)
- JavaScript二维数组的使用及删除指定元素
- 异常处理(try catch)
- 关于android的屏幕保持常亮
- [剑指offer] 二叉搜索树的后序遍历序列