100％带有边距的高度，同时保持CSS中DIV的宽度限制

Question

我想要另一个DIV内部人员（出于某些原因我不想更改）

• 水平居中
• 宽度：70％，但不大于800像素且不小于300像素
• 高度：100％，但顶部边距为50px，底部边距为20px
• 可以在IE9 +，现代桌面浏览器和iOS 6+ Safari上正确显示

我可以使它适用于所有属性，但使用此CSS的高度（“子级”是目标DIV）：

#child{
    width: 70%;
    height: 100%;
    max-width:800px;
    min-width:300px;
    margin-top:50px;
    margin-bottom:20px;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

尊重高边距，但是内容被拉伸，因此出现滚动条，这是要防止的。

请在此Fiddle上查看完整的示例。

您是否知道如何解决？

我知道有很多关于“如何实现100％的高度和边距”的问题，但是我没有找到考虑可变宽度的问题。

Answer 1

这是因为边距已添加到元素的高度。

我通过向父级添加填充并为子级删除边距来更新小提琴。

在计算父级的高度时，我还使用了box-sizing属性来将填充考虑在内：

#parent{
    width: 100%;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 20px;
    box-sizing: border-box;
}

http://jsfiddle.net/u6we2axp/2/

Answer 2

您可以使用绝对定位来获得正确的高度：

#child {
    position: absolute;
    top: 50px;
    bottom: 20px;
    left: 0;
    right: 0;
    width: 70%;
    min-width: 300px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

这需要添加position: relative对于#parent但如果它是身体的唯一子代，则可以避免。 这可以解决由于某些原因而我不想更改的问题。

在这里演示