100% 高度和边距，同时保持 CSS 中 DIV 的宽度限制答案

【问题标题】：100% height with margin while keeping width constraints for DIV in CSS100% 高度和边距，同时保持 CSS 中 DIV 的宽度限制
【发布时间】：2014-09-02 08:09:22
【问题描述】：

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

水平居中
宽度：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;
}

高度边距得到尊重，但内容被拉伸，所以出现滚动条，要防止什么。

请查看完整示例at this Fiddle。

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

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

【问题讨论】：

我无法理解您的关键问题？
你可以为父级添加 50/20px 的顶部/底部填充吗？
我不明白。您能否添加一个草图，说明您的预期输出与小提琴中当前的输出相比应该是什么样的？

标签： html css layout

【解决方案1】：

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

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

我还使用 box-sizing 属性使其在计算父级的高度时考虑填充：

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

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

【讨论】：

【解决方案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 但如果它是body 的唯一子元素，则可以避免它。这可以解决您的问题中出于某些原因我不想更改的部分。

Demo Here

【讨论】：