html - 使子元素(带填充)为父元素的 100% 宽度和高度

Question

是否可以使子元素(带填充)的宽度和高度达到其父元素的 100%？

html:

 <div id="parent">
       <div id="child"></child>
    </div>

CSS:

  #child {
    padding: 15px
    }

我曾尝试让 child 的宽度/高度为 100%，但由于填充，这会使 child 比 parent 大。

我还尝试使子位置成为绝对位置并将顶部、底部、左侧和右侧设置为 0，这适用于宽度但不适用于高度。

父级可以是可变大小。

此外还需要在 IE8 上工作。

Answer 1

您需要使用 box-sizing: border-box; property :

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