如何使 CSS 宽度填充父级？答案

【问题标题】：How to make CSS width to fill parent?如何使 CSS 宽度填充父级？
【发布时间】：2011-01-15 00:04:12
【问题描述】：

我确定以前有人问过这个问题，但我似乎找不到答案。

我有以下标记：

<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 是一个文本区域怎么办？
如果#bar 是输入怎么办？
如果#foo 是一个表格单元格（td）怎么办？（这会改变问题还是问题相同？）

到目前为止，table#bar、input#bar 已经讨论过了。我还没有看到 textarea#bar 的好的解决方案。我认为带有div 包装的没有边框/边距/填充的文本区域可能与div 样式一起用作textarea 的边框。

【问题讨论】：

标签： css

【解决方案1】：

差不多了，只需将outerWidth: 100%; 更改为width: auto;（outerWidth 不是 CSS 属性）

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

width: auto;
display: block;

【讨论】：

是的，我回答得太快了；P
等一下。因此，如果我将宽度属性设置为任何值，它会流血吗？ width: auto 不是解决方案，而是根本不设置宽度？
是的，没错。任何具有display:block;（也称为块级元素）的元素都将采用这种行为。 DIV 元素默认设置了width:auto; 和display:block;。
老帖子，但他不能只使用 box-sizing:border-box 来允许填充在元素的宽度内。

【解决方案2】：

编辑：

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

所以对于：

table#bar 你需要将宽度设置为 100%，否则它只会是它确定需要的宽度。但是，如果表格行的总宽度大于bar 的宽度，它将扩展到所需的宽度。如果我记得你可以通过设置display: block !important; 来抵消这个问题，尽管我必须解决这个问题已经有一段时间了。（如果我错了，我相信有人会纠正我）。

textarea#bar 我相信是块级元素，所以它会遵循与 div 相同的规则。这里唯一需要注意的是textarea 具有cols 和rows 的属性，这些属性在字符列中测量。如果这是在元素上指定的，它将覆盖 css 指定的宽度。

input#bar 是一个内联元素，因此默认情况下您不能为其指定宽度。然而类似于textarea 的cols 属性，它在元素上有一个size 属性，可以确定宽度。也就是说，您始终可以通过在 css 中使用 display: block; 来指定宽度。那么它将遵循与 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;}

会给你你想要的。

【讨论】：

嘿，谢谢。无论如何，桌子决定流血也很有趣。我假设表格与 div 具有相同的行为？
@Dimitry：不，它们有特殊的规则使它们更像inline-block 而不是block 元素。请注意，虽然我说更像而不是 same as :-) 您可能遇到的是，除非另有定义，否则它们通常会扩展以容纳所有可能真的很烦人的列如果某些标题/单元格中有很长的不可换行文本。
感谢您的帮助 :) 让我稍微更新一下问题，以便更全面地概述问题，并希望所有解决方法都可以在一个部分中列出。
我一直在尝试使用 div#foo table#bar 并在 table#bar 上设置 width: 100% 确实会扩展表格，但表格的边框/边距会通过 div#富。将表格设置为 display: block 并不好，因为它会破坏表格渲染的其他方面，例如行的宽度处理。当宽度设置为自动或未设置时，textarea#bar 不会扩展。
对于textarea#bar，您应该能够将其设置为display: block，而几乎没有负面影响。就表格而言，我知道我过去曾为此使用过某种解决方案/缓解措施，但我不记得当时是什么。但是我会说我通常不会在表格上设置“边距”，而是将其包装在带有填充/边距的 div 中......这可能是#foo 本身或另一个 div 使用 jsut 来应用这种类型的间距。您也可以采取措施来抵消边框问题，将边框仅应用于一行中的第一个/最后一个单元格/第一行/最后一行中的单元格

【解决方案3】：

所以经过研究发现如下：

对于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 的边框的原生小部件呈现看起来会与其他所有内容有所不同，因此您可能必须以这种方式设置所有输入的样式。

【讨论】：

【解决方案4】：

使用样式

left: 0px;

或/和

right: 0px;

或/和

top: 0px;

或/和

bottom: 0px;

我认为大多数情况下都可以完成这项工作

【讨论】：

【解决方案5】：

box-sizing: border-box;
width: 100%;
padding: 5px;

box-sizing：边框框；使填充、边距和边框包含在宽度计算中。

MDN

【讨论】：

【解决方案6】：

在子元素上设置display: 'inline-block' 对我有帮助。

这会将元素的容器紧紧地“包裹”在自身周围，而不是自动感觉到整个线宽。这样，父元素也可以围绕它塑造形状，并且不会随其子元素一起移动。

【讨论】：