居中显示:
#a{
margin:0px auto;
}
高度自适应:
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%,可以保证两款浏览器下均能够工作正常。