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

Question

能否使子元素（带有填充）的宽度和高度与其父元素相同？

HTML:

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

CSS：

  #child {
    padding: 15px
    }

我尝试将子元素的宽度/高度设置为100％，但由于填充使子元素比父元素更大，因此不起作用。

我还尝试了将子元素的position属性设置为absolute，并将top、bottom、left和right都设置为0，这在宽度方面可以实现，但是在高度方面却无效。

父元素的大小可能会变化。

另外需要在IE8上工作。

- user3416023

Answer 1

您需要使用 box-sizing: border-box; 属性：

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

- sp00m

Answer 2

盒模型属性

您可以使用box-sizing属性来实现此目的。 像这样：

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

演示

这个属性包含填充(padding)（如果有边框(border)的话也包括）到子元素的总宽度中，所以即使你设置了width:100%并且给它一些padding，它也不会溢出容器。

更多关于这个属性的信息，请查看MDN

IE8+支持该属性，但您需要使用-moz-前缀来支持FF28-，请参见canIuse获取更多信息。

% padding

如果您可以使用百分比填充，则可以进行以下计算，使子元素具有与父元素相同的大小而无需box-sizing属性。

宽度的计算公式:

width of child +  left and right padding child = 100%

计算高度：

height of child +  top and bottom padding child = 100%

例子：

#child {
    padding: 5%;
    width:90%;
    height:90%;
}

DEMO

- web-tiki

Answer 3

尝试将盒模型改为使用box-sizing: border-box;。

* {
  box-sizing: border-box;
}

如果需要支持IE8，您可能需要使用http://modernizr.com/。

box-sizing兼容性表格

- Paul Redmond

---

正如您链接的兼容性表所述，IE8支持无需使用Modernizr。 - web-tiki