关于如何让一个只有宽高只有百分比的父级下的子节点以百分比的形式继承父级的宽高
第一次在博客园写自己的心得体会：2014年8月22日15:12:42
由于项目需求需要更改，之前自己写的一个图片轮播插件结构如下：
<div class="focus" id="focus">
<div id="focus_m" class="focus_m">
<ul>
<li style="display:block;"><img style="width:100%; height:100%" src="images/maw2.jpg"" /></li>
<li style="display:none"><img style="width:100%; height:100%" src="images/maw5.jpg"" /></li>
<li style="display:none"><img style="width:100%; height:100%" src="images/maw4.jpg"" /></li>
<li style="display:none"><img style="width:100%; height:100%" src="images/maw3.jpg"" /></li>
<li style="display:none"><img style="width:100%; height:100%" src="images/maw2.jpg"" /></li>
</ul>
</div>
<a href="javascript:;" class="focus_l" id="focus_l" title="上一张"><b></b><span></span></a>
<a href="javascript:;" class="focus_r" id="focus_r" title="下一张"><b></b><span></span></a>
</div>
父级focus的高度需求要占整个浏览器高度的百分之75%，则这时需要动态获取浏览器实际的高度：
<script>
window.onload=function(){
var wdh = window.screen.availHeight;
document.getElementById('focus').style.height=(wdh*0.75)+'px';
}
</script>
这时我们就可以动态的根据浏览器的实际高度让focus实际高度占用浏览器的75%，这时可以将focus_m的高度继承父类focus的高度 height:inherit;这时候focus_m的高度是focus高度的75%，但是，如果我们将focus_m的高度设置成百分比的形式，样式还是成立的，则继承focus_m的子节点高度要是如果设置成inheris则节点的高度占用的是父级的高度属性的值。
下面我举个简单的例子。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script> 7 window.onload=function(){ 8 var wdh = window.screen.availHeight; 9 document.getElementById('div1').style.height=(wdh*0.75)+'px'; 10 } 11 12 </script> 13 </head> 14 15 <body> 16 <div id="div1" style="width:100%; background:red"> 17 <div style="height:75%; width:50%; background:blue;"> 18 19 </div> 20 </div> 21 </div> 22 </body> 23 </html>
父级div1的高度是通过页面window的高度得到的，而子节点div的高度要继承父级的的高度只能通过%的形式，如果子节点div中还有子节点的话，高度可以设置为inheris继承直接父级的属性。
注意：任何IE浏览器都不支持Inheris;
2014-08-22
