關於如何讓一個只有寬高只有百分比的父級下的子節點以百分比的形式繼承父級的寬高

時間 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>