CSS 100% height with padding/margin -


It's been crazy for some days now, but in reality this is a problem that I have suppressed and the last For some years: How can I make an element with HTML / CSS which has a width and / or height which is 100% of its original element and still has the proper padding or margin? I mean if my original element is 200px tall and I specify 100% height with 5px padding then I hope that I get a 190px with 5px "border" on all sides Should get high element, well concentrated in the original element.

Now, I know that this is not how the standard box model specifies that this should work (although I want to know why exactly ...), so the obvious answer does not work : 

  #myDiv {width: 100% height: 100%; Padding: 5px; }

But it seems to me that arbitrary size parents should have some way to make this effect reliably. Does anyone know a way to accomplish this (seemingly simple) work?

Oh, and for the record I am not very interested in IE compatibility so that should (hopefully) make things a little easier

Edit: Since it was said for an example, here is the easiest way to think I can: 

  & 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;

The challenge is then when the scrollbar needs to be large enough to show the black box with 25 pixel padding on all sides without the page.

I have learned how to read these types of things "". The default display value is for display: block div , but I want to make it clear. Containers should be the right type; Status is the attribute fixed , relative , or absolute . 

 . Stretch Turrugine {display: block; Status: Completed; Height: auto; Bottom: 0; Top: 0; Left: 0; Correct: 0; Margin Top: 20px; Margin-bottom: 20px; Margin-right: 80px; Margin-left: 80px; Background color: green; }  
  & lt; Div class = "stretchedToMargin" & gt; Hello, world


Comments

Post a Comment