关于如何让一个只有宽高只有百分比的父级下的子节点以百分比的形式继承父级的宽高

时间 2019-12-13

原文原文链接

　　第一次在博客园写本身的心得体会：2014年8月22日15:12:42　　javascript

　　因为项目需求须要更改，以前本身写的一个图片轮播插件结构以下：html

<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>java

　　父级focus的高度需求要占整个浏览器高度的百分之75%，则这时须要动态获取浏览器实际的高度：浏览器

</script>spa

　　这时咱们就能够动态的根据浏览器的实际高度让focus实际高度占用浏览器的75%，这时能够将focus_m的高度继承父类focus的高度 height:inherit;这时候focus_m的高度是focus高度的75%，可是，若是咱们将focus_m的高度设置成百分比的形式，样式仍是成立的，则继承focus_m的子节点高度要是若是设置成inheris则节点的高度占用的是父级的高度属性的值。插件

　　下面我举个简单的例子。code

 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继承直接父级的属性。xml

注意：任何IE浏览器都不支持Inheris;htm

2014-08-22