CSS 100% height with padding/margin
css
Solution
I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The `display:block` is the default display value for the `div`, but I like to make it explicit. The container has to be the right type; `position` attribute is `fixed`, `relative`, or `absolute`.
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
margin-bottom:20px;
margin-right:80px;
margin-left:80px;
background-color: green;
}
<div class="stretchedToMargin">
Hello, world
</div>
Fiddle by Nooshu's comment
Problem
With HTML/CSS, how can I make an element that has a width and/or height that is 100% of its parent element and still has proper padding or margins? By "proper" I mean that if my parent element is `200px` tall and I specify `height = 100%` with `padding = 5px` I would expect that I should get a `190px` high element with `border = 5px` on all sides, nicely centered in the parent element. 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: ``` #myDiv { width: 100% height: 100%; padding: 5px; } ``` 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? Oh, and for the record I'm not interested in IE compatibility so that should (hopefully) make things a bit easier. EDIT: Since an example was asked for, here's the simplest one I can think of: ``` <html style="height: 100%"> <body style="height: 100%"> <div style="background-color: black; height: 100%; padding: 25px"></div> </body> </html> ``` 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.