css - 固定边距和流体宽度占父级的 100%

Question

我应该如何使用 CSS 实现:

我想要 2 个 div，一个在另一个里面。父 div 应该占据窗口宽度的 100%，子 div 应该有固定的边距，同时流体宽度填充父级剩余宽度的 100%。 (父 div - child 的 2 个边距)

很明显如何使用 javascript 完成此操作，但我想知道是否有可能仅使用 CSS 和 HTML 来完成此操作。

Example picture

附言对ie8+应该有效

Answer 1

CSS:

<style type="text/css">
.parent {
width: 100%;
overflow: hidden;
background: #ccc;
}

.child {
width: auto;
margin: 30px;
padding: 30px;
background: #eee;
}

body {
margin : 0;
padding: 0;
}
</style>

HTML:

<div class="parent">


    <div class="child">Child Container</div>

</div>