网页div内容居中显示及高度自适应
居中显示:
html,body{ margin:0px; height:100%;}#left{ width:600px; height:100%; float:left;}
?
????? 代码非常简单,对#left对象设置了height:100%,然而也能看出,同时设置了html与body的height:100%,这就是高度自适应问题的关键所在。一个对象的高度是否可以使用百分比显示,取决于对象的父级对象。在页面中,#left直接放置在body之中,因此它的父级对象是body,而在默认状态下,浏览器并是没有给body一个高度属性,因此我们所设置的#left为height:100%,并不会产生任何效果。但是,一旦我们给body设置了100%之后,它的子级对象#left的height:100%便发生作用了,这便是浏览器解析规则引发的高度自适应问题。
????? 代码中除了给出body定义之外,还给html对象也应用了相同的样式定义,这样做的好处是,使IE与Firefox浏览器都能够实现高度自适应,IE与Firefox对页面对象的解析方式存在一定差异。在IE中,html对象默认为100%的高度,body却不是。而在Firefox中,html标签就不是100%高度,因此我们给两个标签都定义为height:100%,可以保证两款浏览器下均能够工作正常。