Differences

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

--- css:div_100_height_with_padding_margin [2020/05/20 08:42] – 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>