当前位置: 代码迷 >> Web前端 >> 网页div内容正当中显示及高度自适应
  详细解决方案

网页div内容正当中显示及高度自适应

热度:33   发布时间:2012-11-23 00:03:43.0
网页div内容居中显示及高度自适应

居中显示:

#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%,可以保证两款浏览器下均能够工作正常。

  相关解决方案