如何使 CSS 宽度填充父级？

How to make CSS width to fill parent?

提问by Dmitriy Likhten

I am sure this problem has been asked before but I cannot seem to find the answer.

我确信这个问题以前曾被问过，但我似乎找不到答案。

I have the following markup:

我有以下标记：

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

My desire is to make foo to have width of 600px(width: 600px;) and to make bar have the following behaviors:

我的愿望是使 foo 具有600px( width: 600px;) 的宽度并使 bar 具有以下行为：

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

In other words instead of setting width of bar to 592pxI would like to set the outer width of bar to 100%so that it is computed to 592px. The importance here is that I can change foo's width to 800pxand bar will calculate when rendered instead of me having to do the math for all these instances manually.

换句话说，592px我不想将bar 的宽度设置为 ，而是将 bar的外部宽度设置为 ，100%以便将其计算为592px。这里的重要性在于，我可以将 foo 的宽度更改为，800px并且 bar 将在呈现时进行计算，而不是我必须手动为所有这些实例进行数学计算。

Is this possible in pure CSS?

这在纯 CSS 中可能吗？

Some more fun with it:

更有趣的是：

• What if #baris a table?
• What if #baris a textarea?

• What if #baris an input?

• What if #foois a table cell (td)? (Does this change the problem or is the problem identical?)

• 如果#bar是一张桌子呢？
• 如果#bar是 textarea 呢？

• 如果#bar是输入呢？

• 如果#foo是表格单元格 ( td) 呢？（这会改变问题还是问题相同？）

---

---

So far the table#bar, input#barhas been discussed. I have not seen a good solution for textarea#bar. I Think a textarea with no border/margin/padding with a divwrap might work with the divstyled to work as borders for the textarea.

到此为止table#bar，input#bar已经讨论过了。我还没有看到 textarea#bar 的好解决方案。我认为没有边框/边距/填充和div换行的 textarea可能适用于div样式作为textarea.

采纳答案by prodigitalson

EDIT:

编辑：

Those three different elements all have different rendering rules.

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

So for:

因此对于：

table#baryou need to set the width to 100% otherwise it will be only be as wide as it determines it needs to be. However, if the table rows total width is greater than the width of barit will expand to its needed width. IF i recall you can counteract this by setting display: block !important;though its been awhile since ive had to fix that. (im sure someone will correct me if im wrong).

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

textarea#bari beleive is a block level element so it will follow the rules the same as the div. The only caveat here is that textareatake an attributes of colsand rowswhich are measured in character columns. If this is specified on the element it will override the width specified by the css.

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

input#baris an inline element, so by default you cant assign it width. However the similar to textarea's colsattribute, it has a sizeattribute on the element that can determine width. That said, you can always specifiy a width by using display: block;in your css for it. Then it will follow the same rendering rules as the div.

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

td#foowill be rendered as a table-cellwhich has some craziness to it. Bottom line here is that for your purposes its going to act just like div#fooas far as restricting the width of its contents. The only issue here is going to be potential unwrappable text in the column somewhere which would make it ignore your width setting. Also all cells in the column are going to get the width of the widest cell.

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

---

---

Thats the default behavior of block level element - ie. if width is auto(the default) then it will be 100% of the inner width of the containing element. so in essence:

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

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

will give you exactly what you want.

会给你你想要的。

回答by Rowan

almost there, just change outerWidth: 100%;to width: auto;(outerWidth is not a CSS property)

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

alternatively, apply the following styles to bar:

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

width: auto;
display: block;

回答by Tigsar

Use the styles

使用样式

left: 0px;

or/and

或/和

right: 0px;

or/and

或/和

top: 0px;

or/and

或/和

bottom: 0px;

I think for most cases that will do the job

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

回答by Dmitriy Likhten

So after research the following is discovered:

于是经过研究发现：

For a div#barsetting display:block; width: auto;causes the equivalent of outerWidth:100%;

对于一个div#bar设置display:block; width: auto;导致相当于outerWidth:100%;

For a table#baryou need to wrap it in a div with the rules stated below. So your structure becomes:

对于 a，table#bar您需要使用以下规则将其包装在 div 中。所以你的结构变成：

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

This way the table takes up the parent div 100%, and #barWrapis used to add borders/margin/padding to the #bartable. Note that you will need to set the background of the whole thing in #barWrapand have #bar's background be transparent or the same as #barWrap.

这样表格会占用父 div 100%，并#barWrap用于向#bar表格添加边框/边距/填充。请注意，您需要在 中设置整个事物的背景，#barWrap并且#bar背景要透明或与#barWrap.

For textarea#barand input#baryou need to do the same thing as table#bar, the down side is that by removing the borders you stop native widget rendering of the input/textarea and the #barWrap's borders will look a bit different than everything else, so you will probably have to style all your inputs this way.

对于textarea#bar和input#bar你需要做同样的事情table#bar，不好的一面是，通过消除边界您停止输入/ textarea的的本地部件的渲染和#barWrap的边界看起来会比其他一切有点不同，所以你可能要以这种方式设置所有输入的样式。