Databases
StackOverflow2013
Postsdbo
POCSS 100% height with padding/margin
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS 100% height with padding/margin
    text
    copied!<p>This has been driving me crazy for a couple of days now, but in reality it's a problem that I've hit off and on for the last few years: With HTML/CSS how can I make an element that has a width and/or height that is 100% of it's parent element and still has proper padding or margins?</p> <p>By "proper" I mean that if my parent element is <code>200px</code> tall and I specify <code>height = 100%</code> with <code>padding = 5px</code> I would expect that I should get a <code>190px</code> high element with <code>border = 5px</code> on all sides, nicely centered in the parent element.</p> <p>Now, I know that that's not how the standard box model specifies it should work (although I'd like to know why, exactly...), so the obvious answer doesn't work:</p> <pre class="lang-css prettyprint-override"><code>#myDiv { width: 100% height: 100%; padding: 5px; } </code></pre> <p>But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. Does anyone know of a way of accomplishing this (seemingly simple) task?</p> <p>Oh, and for the record I'm not terribly interested in IE compatibility so that should (hopefully) make things a bit easier. </p> <p><strong>EDIT:</strong> Since an example was asked for, here's the simplest one I can think of:</p> <pre class="lang-html prettyprint-override"><code>&lt;html style="height: 100%"&gt; &lt;body style="height: 100%"&gt; &lt;div style="background-color: black; height: 100%; padding: 25px"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars.</p>
 

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