html - 100% 高度带边距，同时保持 CSS 中 DIV 的宽度限制

Question

我想要一个 DIV insider 另一个(出于某些原因我不想更改)

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

我可以使用此 CSS(“child”是目标 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;
}

高度边距被尊重，但内容被拉伸(stretch)，所以出现滚动条，这是要防止的。

请查看完整示例 at this Fiddle .

您知道如何解决这个问题吗？

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

Answer 1

那是因为边距被添加到元素的高度。

我通过向父级添加填充并删除子级的边距来更新 fiddle 。

我还使用了 box-sizing 属性让它在计算父级的高度时考虑填充:

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

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