使子元素（带填充）的父元素的宽度和高度为100％

问题描述：

是否可以使子元素（具有填充）与其父元素的宽度和高度成100％？

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 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.

父级可以是可变大小。

此外还需要在IE8上工作。

In addition needs to work on IE8.

答

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

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