Make child element (with padding) 100% width and height of parent

css, html

Solution

You need to use the `box-sizing: border-box;` property:

#child {
    padding: 15px
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

Problem

Is it possible to make a child element (with padding) 100% width and height of its parent element? html: ``` <div id="parent"> <div id="child"></child> </div> ``` css: ``` #child { padding: 15px } ``` I have tried making the child 100% width/height but this makes the child larger than the parent due to the padding. I have also tried to make the child position absolute and set top,bottom,left and right to 0 and this works for the width but not the height. The parent can be a variable size. In addition needs to work on IE8.

Original source