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

是否可以使子元素（带填充）的宽度和高度为其父元素的100%

html:

我尝试过让孩子100%宽/高，但由于填充，这会使孩子比父母大

我还尝试将子位置设置为绝对位置，并将top、bottom、left和right设置为0，这适用于宽度，但不适用于高度

父级可以是可变大小

此外，您还需要使用IE8。

您需要使用：

#孩子{
填充：15px
宽度：100%；
身高：100%；
框大小：边框框；
}

框大小属性 您可以使用

框大小调整

属性进行调整。 像这样：

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

此属性将填充（和边框，如果有的话）包含到子项的总宽度中，这样即使您设置

width:100%，它也不会溢出容器并给它一些填充

有关此属性的详细信息，请访问

IE8+支持此属性，但您需要
-moz-
前缀来支持FF28-有关更多信息，请参阅

%填充物
如果可以使用百分比填充，则可以进行此计算，使子元素的大小与父元素的大小相同，而无需使用
框大小调整
属性

宽度的计算：

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%;
}

尝试将长方体模型更改为使用
长方体大小：边框长方体

* {
  box-sizing: border-box;
}

您可能需要使用IE8来获得支持

正如您链接到的兼容性表所示，不需要为IE8提供Modernizer支持。
#child {
    padding: 5%;
    width:90%;
    height:90%;
}

* {
  box-sizing: border-box;
}