How to get all parent div height and width separately if their childs are different using javascript
<p>I have parent divs named - "<em>main</em>" and "<em>sq</em>" , they have same name child called "<em>s</em>" which both are designed (width and height) using javascript, so I want to make the both div named "<em>s</em>" different width and height according to their parent with</p>

<p>both child div ( class - "<em>s</em>") height and width should be in ratio to 1.5 to their parent div </p>

<p>the <strong><em>main</em></strong>'s child is success to get the div in ratio but <strong><em>sq</em></strong>'s not.</p>

<p>and I've found the problem in ( <em>e.parentNode.clientWidth &amp; e.parentNode.clientHeight</em> ) which is only taking the <strong><em>main</em></strong>'s width and height not the <strong><em>sq</em></strong>'s.</p>

<p>Simply , the the black div inside orange is in ratio to 1.5 but green's not ?</p>

<p>check here -<a href="http://www.w3schools.com/code/tryit.asp?filename=FAO5SWY5KETB" rel="nofollow noreferrer">http://www.w3schools.com/code/tryit.asp?filename=FAO5SWY5KETB</a>    </p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="row"&gt;
&lt;div class="main" style="width:400px;height:500px;background-color:orange"&gt;
&lt;div class="s" style="background-color:black"&gt;xfgx&lt;/div&gt;
&lt;/div&gt;
&lt;div class="sq" style="width:250px;height:500px;background-color:green;"&gt;
&lt;div class="s" style="background-color:black;"&gt;xfgx&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>body{
    margin:0px;
    }
.row {
    clear:both;
    width:100pc;
}
.main,.sq{
    float:left;
    position:relative;
}
</code></pre>

<p><strong>JS</strong></p>

<pre><code>var sms = [].slice.call(document.getElementsByClassName("s"), 0);
 sms.forEach(function(e) {
    var w = window.innerWidth - e.parentNode.clientWidth ;
    var h = window.innerHeight - e.parentNode.clientHeight ;
    var MW = w - ( w / 1.5 );
    var MH = h - ( h / 1.5 );
    e.style.width = MW + 'px';
    e.style.height = MH + 'px';
    document.getElementById('d').innerHTML= e.parentNode.clientWidth ;
});
</code></pre>