其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数是谁，就是这个100%是相对于谁的width、height来说是100%？
div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。举例说明：父div(deman)宽300高200，子div(cc)如果在这个条件下设置divcc的宽高都为100%的话，那cc的确切大小就是父div的大小(宽300高200)，在尝试中你会发现，div显示会受自身和其上一级div的padding和margin影响，而其实际宽高不受影响。值得玩味噢！
有朋友问如何让div的高度为100%撑满屏.以前用table来布局的时候会用到table高度100%然后再在这个table里插一个table垂直居中.这样的页面可以让它在不同分辨率下都在显示器中间.用div则比较麻烦了你设置div的高度为100%在浏览器里仍然看它扁的可怜.
呵呵~
应该怎么解决呢?
你设div的高度为100%,那么它是和什么地方相对为100%?
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
同时，让人高兴的是，这样设置的css样式不存在浏览器兼容问题，在IE5.5、IE6、IE7、IE8还有火狐均可正常显示。
下面以实例说明div100%的问题：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>DivHeight100%_Test</title>
<styletype="text/css">
<!--
html,body{
margin:0px;
height:100%;
}
#deman{
height:100%;
background-color:#CCF;
}
.cc{
background-color:#9C9;
height:auto;
}
-->
</style>
</head>
<body>
<divid="deman">
<divclass="cc">DivHeight100%_Test</div>
</div>
</body>
</html>
3031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
