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但如果它是身體的唯一子代，則可以避免。 這可以解決由於某些原因而我不想更改的問題。

在這里演示