正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！
其实，要弄懂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""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/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>
div中的div居中
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。