• With HTML/CSS how to 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?
  • The parent element is 200px tall and we specify 100% height with 5px padding we expect to get a 190px high element with 5px “border” on all sides, nicely centered in the parent element.
[pastacode lang=”css” manual=”%23myDiv%20%0A%7B%0A%20%20%20%20width%3A%20100%25%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20padding%3A%205px%3B%0A%7D%0A” message=”CSS CODE” highlight=”” provider=”manual”/]
  • EDIT: Since an example was asked for,
[pastacode lang=”markup” manual=”%3Chtml%20style%3D%22height%3A%20100%25%22%3E%0A%20%20%20%20%3Cbody%20style%3D%22height%3A%20100%25%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20style%3D%22background-color%3A%20black%3B%20height%3A%20100%25%3B%20padding%3A%2025px%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%3C%2Fhtml%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]
  • 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.

  • The display:block is the default display value for the div. The container has to be the right type; position attribute is fixed, relative, or absolute.
[pastacode lang=”css” manual=”.stretchedToMargin%20%0A%7B%0A%20%20display%3A%20block%3B%0A%20%20position%3Aabsolute%3B%0A%20%20height%3Aauto%3B%0A%20%20bottom%3A0%3B%20%20top%3A0%3B%20%20left%3A0%3B%20%20right%3A0%3B%0A%20%20margin-top%3A20px%3B%0A%20%20margin-bottom%3A20px%3B%0A%20%20margin-right%3A80px%3B%0A%20%20margin-left%3A80px%3B%0A%20%20background-color%3A%20green%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/] [pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22stretchedToMargin%22%3E%0A%20%20Hello%2C%20world%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]

  • 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.
[pastacode lang=”css” manual=”-webkit-box-sizing%3A%20border-box%3B%0A%20%20%20-moz-box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A” message=”css code” highlight=”” provider=”manual”/]

  • Attach the inner box using top, left, right, bottom and then add margin.
[pastacode lang=”markup” manual=”.box%20%0A%7B%0Amargin%3A8px%3B%20position%3Aabsolute%3B%20top%3A0%3B%20left%3A0%3B%20right%3A0%3B%20bottom%3A0%0A%7D%0A%3Cdiv%20class%3D%22box%22%20style%3D%22background%3Ablack%22%3E%0A%20%20%3Cdiv%20class%3D%22box%22%20style%3D%22background%3Agreen%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22box%22%20style%3D%22background%3Alightblue%22%3E%0AThis%20will%20show%20three%20nested%20boxes.%20Try%20resizing%20browser%20to%20see%20they%20remain%20nested%20properly.%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]

  • The better way is with the calc() property.
[pastacode lang=”css” manual=”%23myDiv%20%0A%7B%0A%20%20%20%20width%3A%20calc(100%25%20-%205px)%3B%0A%20%20%20%20height%3A%20calc(100%25%20-%205px)%3B%0A%20%20%20%20padding%3A%205px%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
  • Just make sure you don’t forget the space between the values and the operator (eg (100%-5px) that will break the syntax.

  • Another solution: You can use percentage units for margins as well as sizes.

For example:

[pastacode lang=”css” manual=”.fullWidthPlusMargin%20%0A%7B%0A%20%20%20%20width%3A%2098%25%3B%0A%20%20%20%20margin%3A%201%25%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

  • Here’s an example where the child – given padding and a border – uses absolute positioning to fill the parent 100%. The parent uses relative positioning in order to provide a point of reference for the child’s position while remaining in the normal flow – the next element “more-content” is not affected:
[pastacode lang=”css” manual=”%23box%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20height%3A%20300px%3B%0A%20%20%20%20width%3A%20600px%3B%20%0A%7D%0A%23box%20p%20%0A%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20border-style%3A%20dashed%3B%0A%20%20%20%20padding%3A%201em%3B%20%20%20%20top%3A%200%3B%20%20%20%20right%3A%200%3B%20%20%20%20bottom%3A%200%3B%0A%20%20%20%20left%3A%200%3B%0A%7D%0A%3Cdiv%20id%3D%22box%22%3E%0A%20%20%3Cp%3E100%25%20height%20and%20width!%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D%22more-content%22%3E%0A%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/]

  • Full height with padding
[pastacode lang=”css” manual=”body%20%0A%7B%0A%20%20margin%3A%200%3B%0A%7D%0A.container%20%0A%7B%0A%20%20min-height%3A%20100vh%3B%0A%20%20padding%3A%2050px%3B%0A%20%20box-sizing%3A%20border-box%3B%0A%20%20background%3A%20silver%3B%0A%7D%0A%3Cdiv%20class%3D%22container%22%3EHello%20world.%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/]

  • Full height with margin
[pastacode lang=”css” manual=”body%20%0A%7B%0A%20%20margin%3A%200%3B%0A%7D%0A.container%20%0A%7B%0A%20%20min-height%3A%20calc(100vh%20-%20100px)%3B%0A%20%20margin%3A%2050px%3B%0A%20%20background%3A%20silver%3B%0A%7D%0A%3Cdiv%20class%3D%22container%22%3EHello%20world.%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

  • Full height with border
[pastacode lang=”css” manual=”body%20%0A%7B%0A%20%20margin%3A%200%3B%0A%7D%0A.container%20%0A%7B%0A%20%20min-height%3A%20100vh%3B%0A%20%20border%3A%2050px%20solid%20pink%3B%0A%20%20box-sizing%3A%20border-box%3B%0A%20%20background%3A%20silver%3B%0A%7D%0A%3Cdiv%20class%3D%22container%22%3EHello%20world.%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/]

  • This is one of the solution :
[pastacode lang=”css” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A.stretchedToMargin%20%0A%7B%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20width%3A100%25%3B%0A%20%20%20%20height%3A100%25%3B%0A%0A%7D%0A%3C%2Fstyle%3E%0A” message=”css code” highlight=”” provider=”manual”/]

Categorized in: