如何使CSS宽度填充父对象？

我敢肯定这个问题已经被问过了，但是我似乎找不到答案。

我有以下标记：

<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我不想将bar的宽度设置为，而是将bar的外部宽度设置为，100%以便将其计算为592px。这里的重要性在于，我可以将foo的宽度更改为，800px并且bar将在渲染时进行计算，而不是我必须手动对所有这些实例进行数学运算。

纯CSS是否有可能？

一些更多的乐趣：

• 如果#bar是桌子怎么办？
• 如果#bar是文本区域怎么办？

• 如果#bar是输入怎么办？

• 如果#foo是表格单元格（td），该怎么办？（这是否改变了问题，或者问题是否相同？）

到目前为止table#bar，input#bar已经进行了讨论。我还没有为textarea＃bar找到一个好的解决方案。我认为没有边框/边距/填充的自动div换行的textarea可能与div样式配合使用，可以作为的边框textarea。

编辑：

这三个不同的元素都有不同的渲染规则。

因此对于：

table#bar您需要将宽度设置为100％，否则它将仅取决于其确定的宽度。但是，如果表行的总宽度大于表的宽度，bar它将扩展到所需的宽度。如果我记得您可以通过设置display: block !important;它来解决这个问题，因为我已经不得不修复它了。（如果我错了，请确保有人会纠正我）。

textarea#bar我相信是块级元素，因此它将遵循与div相同的规则。唯一需要注意的是，它textarea采用的属性，cols并rows在字符列中进行度量。如果在元素上指定了此宽度，它将覆盖css指定的宽度。

input#bar是内联元素，因此默认情况下您不能为其指定宽度。但是，类似于textarea的cols属性，它size在元素上具有可以确定宽度的属性。也就是说，您始终可以display: block;在CSS中使用它来指定宽度。然后它将遵循与div相同的渲染规则。

td#foo将呈现为table-cell对它有些疯狂的 底线是为了您的目的，它的作用就像div#foo限制其内容的宽度一样。唯一的问题是该列中某处潜在的不可包装文本，这将使其忽略您的宽度设置。此外，列中的所有单元格都将获得最宽单元格的宽度。

那就是块级元素的默认行为-即。如果width为auto（默认值），则它将为包含元素的内部宽度的100％。所以本质上：

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

会给您您想要的。

几乎在那里，只需更改outerWidth: 100%;为width: auto;（outerWidth不是CSS属性）

或者，将以下样式应用于bar：

width: auto;
display: block;

使用样式

left: 0px;

或/和

right: 0px;

或/和

top: 0px;

或/和

bottom: 0px;

我认为大多数情况下都能胜任

因此，经过研究发现以下内容：

对于div#bar设置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的边界看起来与所有其他项都有些不同，因此您可能必须以这种方式设置所有输入的样式。