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

Question

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

HTML：

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

CSS：

  #child {
    padding: 15px
    }

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

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

父级可以是可变大小。

另外需要在IE8上工作。

Answer 1

你需要使用box-sizing: border-box; 财产 ：

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

Answer 2

盒子尺寸属性

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

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

DEMO

此属性包括填充（和边框，如果你有一些）到孩子的总宽度，所以即使你设置width:100%; ，它也不会溢出容器width:100%; 并给它一些填充。

有关此房产的更多信息在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

Answer 3

尝试更改框模型以使用box-sizing: border-box;

* {
  box-sizing: border-box;
}

您可能需要使用http://modernizr.com/来获取IE8的支持。

用于盒子大小调整的兼容性表