Differences

This shows you the differences between two versions of the page.

--- css:div_100_height_with_padding_margin [2020/05/20 08:52] – peter
+++ css:div_100_height_with_padding_margin [2021/08/08 12:53] (current) – removed peter
@@ Line 1: / Line 1: @@
-====== CSS - DIV 100% height with padding/margin ======
-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.
-The obvious answer doesn't work:
-<code css>
-#myDiv {
-    width: 100%
-    height: 100%;
-    padding: 5px;
-}
-</code>
-----
-===== Answer =====
-**display:block** is the default display value for a div, but I like to make it explicit.
-The container has to be the right type; position attribute is fixed, relative, or absolute.
-<code css>
-.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;
-}
-</code>
-<code html>
-<div class="stretchedToMargin">
-  Hello, world
-</div>
-</code>
-----
-Can also do percentage:
-<code css>
-*.stretchedMargin {
-    display: block;
-    position:absolute;
-    height:auto;
-    bottom:0;
-    top:0;
-    left:0;
-    right:0;
-    margin-top:1%;
-    margin-right:50%;
-    margin-left:5%;
-    background-color: green;
-}
-</code>
-----
-<WRAP info>
-**NOTE:**  This may not work with some older versions of i.e.
-See the following to fix this:
-https://code.google.com/archive/p/ie7-js/
-</WRAP>
-----
-===== Using CSS box-sizing =====
-There is a new property in CSS3 that you can use to change the way the box model calculates width/height, it's called box-sizing.
-By setting this property with the value "border-box" it makes whichever element you apply it to not stretch when you add a padding or border.
-If you define something with 100px width, and 10px padding, it will still be 100px wide.
-<code css>
-box-sizing: border-box;
-</code>
-----
-===== Using basic CSS =====
-The solution is to NOT use height and width at all! Attach the inner box using top, left, right, bottom and then add margin.
-<code css>
-.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
-</code>
-<code html>
-<div class="box" style="background:black">
-  <div class="box" style="background:green">
-    <div class="box" style="background:lightblue">
-      This will show three nested boxes. Try resizing browser to see they remain nested properly.
-    </div>
-  </div>
-</div>
-</html>