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

【问题标题】：Make child element (with padding) 100% width and height of parent使子元素（带填充）为父元素的 100% 宽度和高度
【发布时间】：2014-07-12 14:28:14
【问题描述】：

是否可以让子元素（带内边距）的宽度和高度达到其父元素的 100%？

html:

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

css:

  #child {
    padding: 15px
    }

我尝试让孩子的宽度/高度为 100%，但由于填充，这使得孩子比父母大。

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

父级可以是可变大小。

另外需要在IE8上工作。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

盒子尺寸属性

您可以为此使用box-sizing 属性。像这样：

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

此属性包含子元素的总宽度的内边距（如果有边框，还有边框），因此即使您设置 width:100%; 并给它一些内边距，它也不会溢出容器。

更多信息请关注MDN

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

如果您可以使用百分比填充，则可以进行此计算，以便子元素与父元素具有相同的大小，而无需 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%;
}

【讨论】：

【解决方案3】：

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

* {
  box-sizing: border-box;
}

您可能需要使用http://modernizr.com/ 以获得对 IE8 的支持。

【讨论】：