StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS "height: [percentage]" behaviour using "margin" and/or "padding"
text
Body
copied!<p>I got an awesome incognita to share with you. I found it while trying to do a very simple thing - at least i thought it was simple.</p> <h1>The Stage</h1> <p>A parent element with a fixed height value which contains any number of child. Let's put divs as example, starting with 2 childs.</p> <pre><code><div class="parent"> <div class="child"></div> <div class="child"></div> </div> </code></pre> <h1>The Goal</h1> <p>Style the child's height and vertical margin to match exactly the parent height, dividing the total height equally among the child elements. The solution should be reusable for any number of child elements. Of course some kind of calculation could be needed.</p> <h1>The problem</h1> <p>Using percentage-based height and margin don't works. Any solution like the following...</p> <pre><code>.parent { width: 5em; /* some fixed width */ height: 10em; /* some fixed height */ } .child { width: 100%; margin-top: 4%; height: 44%; /* let's render 3 gaps of 4% each (on top, middle and bottom) */ } </code></pre> <p>... will fail to render as expected because the vertical margin - and padding too - resolved values are based on parent's width, not parent's height as you may expect. <a href="http://jsfiddle.net/Sh87R/5/" rel="nofollow">This jsfiddle</a> demonstrates this behaviour with the following tests:</p> <h2>Test 1</h2> <p>Set a margin-top and margin-bottom. Child's height is set to <code>100% - @margin-top - @margin-bottom</code></p> <h3>Case A</h3> <p>Parent's height is higher than its width. The browser renders a gap on the bottom of the parent because of the mentioned problem.</p> <h3>Case B</h3> <p>Parent's height is equal than its width. The browser renders as expected because parent's width is equal to the parent's height and the margin is resolved correctly:</p> <pre><code>@parent-width = @parent-height @base = @parent-width </code></pre> <h3>Case C</h3> <p>Parent's height is lower than its width. The second child is clipped because of the mentioned problem.</p> <h2>Test 2</h2> <p>This test cases demonstrate the padding behaviour as the test 1 does with the margin.</p> <h2>Test 3</h2> <p>Demonstrates that the child's height is resolved from parent's height. The browser renders all cases as expected if we don't try to put some margin or padding.</p> <h2>Test 4</h2> <p>This test is intended to be useful if you want to research an answer for <strong>the second question</strong> - see below</p> <h1>The questions</h1> <ol> <li>Why are vertical height and padding based on parent's width rather than parent's height? I couldn't find anything on the w3c specs.</li> <li>What is the better posible solution to reach the desired goal?</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload