我有以下标记：
<div id="foo">
<div id="bar">
here be dragons
</div>
</div>
我的愿望是让foo的宽度为600px(width：600px;)，并使bar具有以下行为：
padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; outerWidth: 100%;
换句话说，不是将条的宽度设置为592px我想将条的外部宽度设置为100％，以便它被计算为592px。这里的重要性在于，我可以将foo的宽度更改为800px，而bar将在渲染时计算，而不是手动对所有这些实例进行计算。
这是可能在纯CSS？
一些更有趣的：
>如果#bar是一个表呢？
>如果#bar是textarea怎么办？
>如果#bar是一个输入？
>如果#foo是表格单元格(td)怎么办？ (这是否改变了问题或问题是否相同？)
到目前为止的表#bar，输入#bar已经讨论过了。我没有看到一个很好的解决方案textarea#bar。我认为一个textarea没有边框/边缘/填充与一个div包装可能与div样式工作作为textarea的边框。
解决方法
那三个不同的元素都有不同的重写规则哈哈。
因此对于：
table#bar你需要将宽度设置为100％，否则它将只有它决定它需要的宽度。但是，如果表行总宽度大于条的宽度，它将扩展到所需的宽度。如果我记得你可以通过设置display：block！important来解决这个问题。虽然它已经一段时间，因为ive必须解决这个问题。 (确保有人会纠正我，如果错误)。
textarea#bar i beleive是一个块级元素，因此它将遵循与div相同的规则。这里唯一的警告是textarea取字符列的行和列的属性。如果在元素上指定，它将覆盖由css指定的宽度。
输入#bar是一个内联元素，因此默认情况下你不能分配宽度。但是，与textarea的cols属性类似，它在元素上具有可以确定宽度的size属性。也就是说，你可以通过使用display：block指定宽度;在你的css中。然后它将遵循与div相同的呈现规则。
td#foo将被渲染为一个表格单元格，它有一些疯狂。这里的底线是，为了你的目的，它的行为就像div#foo一样限制其内容的宽度。这里唯一的问题是潜在的不可打包的文本在某处，这将使它忽略你的宽度设置。此外，列中的所有单元格都将获取最宽单元格的宽度。
这是块级元素的默认行为 – 即。如果width是auto(默认值)，那么它将是包含元素的内部宽度的100％。所以本质上：
#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
会给你你想要什么。
