最近在用css对div布局修改样式时,遇到一个问题height:xx%; 不起作用,找了一会儿,终于找到了解决方案。
先贴问题代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题文档</title> <style type="text/css"> .container{height:100%;} .header{height:13%;border:1px #000 solid;} .content{height:85%;border:1px #000 solid;} </style> </head> <body> <div class="container"> <div class="header"></div> <div class="content"></div> <div> </body> </html>
本例子是想将header和content两个div的边框用1px的黑线标出来,其中header占浏览器高度的13%,content占85,结果在浏览器中出现的却是三条黏在一起的黑线。何也?先说如何去解决这个问题,然后再给出解释。know how first,then why.
如何解决:在style里面加上如下样式:html,body{height:100%;}即可解决,这就是问题的关键所在。
Why:一个对象高度是否可以使用百分比显示,取决于对象的父级对象,.container在页面的body之中,因此它的父级是body,而浏览器默认状态下,是没有给body一个高度属性的,因此当我们直接设置.container为height:100%;时,不会产生任何效果,而当我们给body设置了100%之后,它的子级对象.container的height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。同理,需要给html设置height:100%;
=============================================
PS:欢迎关注博主的网站:青春期校园,是一个综合的大学论坛站。