Question

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

HTML：

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

的CSS：

  #child {
    padding: 15px
    }

我已经尝试让孩子100％宽度/高度但这会因为填充而使孩子比父母大。

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

父级可以是可变大小。

此外需要在IE8上工作。

Answer 1

#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%;并给它一些填充。

有关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的支持。