如何使CSS宽度填充父项？
我相信这个问题之前已经被问过了，但我似乎无法find答案。
我有以下标记：
<div id="foo"> <div id="bar"> here be dragons </div> </div> 我的愿望是使foo具有600px （ width: 600px; ）的width: 600px;并使bar具有以下行为：
padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px; outerWidth: 100%;
换句话说，而不是将栏的宽度设置为592px我想设置栏的外部宽度为100%以便计算为592px 。 这里的重要性在于，我可以将foo的宽度更改为800px并且bar会在渲染时计算出来，而不是我必须手动对所有这些实例进行math运算。
这是纯粹的CSS可能吗？
更有趣一些：
- 如果
#bar是一张桌子怎么办？ - 如果
#bar是一个textarea？ -
如果
#bar是一个input？ -
如果
#foo是表单元格（td）呢？ （这是否改变了这个问题，还是问题一致？）
到目前为止， table#bar ， input#bar已经被讨论过了。 我还没有看到textarea＃bar的好解决scheme。 我认为一个textarea没有边界/边距/填充与div换行可能与div样式工作作为textarea边界。
编辑 ：
那么这三个不同的元素都有不同的重新映射规则哈哈。
因此对于：
你需要将table#bar宽度设置为100％，否则它只会被确定为需要的宽度。 但是，如果表格行的总宽度大于条的宽度，则会扩展为所需的宽度。 如果我记得你可以通过设置display: block !important;来抵消这个display: block !important; 虽然已经有一段时间了，因为我必须解决这个问题。 （即使有人会纠正我，如果我错了）。
textarea#bar beleive是一个块级别的元素，所以它将遵循与div相同的规则。 这里唯一需要注意的是textarea采用以字符列度量的cols和rows属性。 如果在元素上指定了它，它将覆盖由CSS指定的宽度。
input#bar是一个内联元素，所以默认你不能分配它的宽度。 然而类似于textarea的cols属性，它在元素上有一个size属性，可以决定宽度。 也就是说，你可以使用display: block;来指定宽度display: block; 在你的CSS中。 然后它将遵循与div相同的渲染规则。
td#foo将被渲染为一个table-cell ，它有一些疯狂的地方。 这里的底线是，为了您的目的，就像div#foo一样，尽可能地限制其内容的宽度。 这里唯一的问题将是在某个地方的列可能无法使用的文本，这将使其忽略你的宽度设置。 此外，列中的所有单元格都将获得最宽的单元格的宽度。
这就是块级元素的默认行为 – 即。 如果宽度是auto （默认），那么它将是包含元素的内部宽度的100％。 所以本质上：
#foo {width: 800px;} #bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
会给你你想要的。
几乎在那里，只是改变outerWidth: 100%; width: auto; （outerWidth不是一个CSS属性）
或者，应用以下样式来禁止：
width: auto; display: block;
使用样式
left: 0px;
和/或
right: 0px;
和/或
top: 0px;
和/或
bottom: 0px;
我认为大多数情况下，这个工作就可以完成
所以经过研究发现：
对于div#bar设置display:block; width: auto; display:block; width: auto; 导致相当于outerWidth:100%;
对于table#bar你需要用下面的规则把它包装在一个div中。 所以你的结构变成：
<div id="foo"> <div id="barWrap" style="border...."> <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">
这种方式表占用了父div的100％，并且#barWrap用于为#bar表添加边界/边距/填充。 请注意，您需要在#barWrap设置整个背景，并使#bar的背景透明或与#barWrap相同。
对于textarea#bar和input#bar您需要执行与table#bar相同的操作， #barWrap的一面是通过删除边框来停止input/ textarea的本机构件渲染，并且#barWrap的边框看起来有点儿不同于其他任何东西，所以你可能不得不以这种方式来devise你所有的input。
