探究css中高度不能正常显示的原因

　　最近在用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：欢迎关注博主的网站：青春期校园，是一个综合的大学论坛站。

posted @ 2013-04-17 22:04  东风化宇  阅读(1268)  评论(0)  编辑  收藏  举报