blocks|key|3275374|text|差不多了，只需将outerWidth:+100%25;更改为width:+auto;+(outerWidth不是CSS属性)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3275375|或者，将以下样式应用于bar：|3275376|width:+auto;
display:+block;|code-block|syntax|javascript|3275377|entityMap^0|8|H|S|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

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

alternatively, apply the following styles to bar:

<pre><code>width: auto;
display: block;
</code></pre>

blocks|key|3062434|text|编辑|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3062435|这三个不同的元素都有不同的呈现规则。|3062436|因此，对于：|3062437|table#bar您需要将宽度设置为100%25，否则它将只有所需的宽度。但是，如果表行的总宽度大于bar的宽度，它将扩展到所需的宽度。如果我没记错的话，你可以通过设置display:+block+!important;来解决这个问题，尽管我已经有一段时间没有解决这个问题了。(如果我错了，我相信有人会纠正我的。)|CODE|3062438|我认为textarea#bar是一个块级元素，所以它将遵循与div相同的规则。这里唯一需要注意的是，textarea的属性是cols和rows，这两个属性是以字符列为单位度量的。如果这是在元素上指定的，它将覆盖css指定的宽度。|3062439|input#bar是一个内联元素，所以默认情况下你不能给它分配宽度。然而，与textarea的cols属性类似，它在元素上有一个size属性，可以确定宽度。也就是说，你总是可以通过在你的css中使用display:+block;来指定宽度。然后它将遵循与div相同的呈现规则。|3062440|td#foo将被呈现为一个疯狂的table-cell。这里的底线是，为了您的目的，它将像div#foo一样限制其内容的宽度。这里唯一的问题是列中某处可能无法换行的文本，这将使其忽略您的宽度设置。此外，列中的所有单元格都将获得最宽单元格的宽度。|3062441|3062442|这是块级元素的默认行为-即。如果宽度是auto+(默认值)，那么它将是包含元素的内部宽度的100%25。所以从本质上说：|3062443|#foo+{width:+800px;}
#bar+{padding-left:+2px;+padding-right:+2px;+margin-left:+2px;+margin-right:+2px;}|code-block|syntax|javascript|3062444|会给你你想要的东西。|3062445|entityMap^0|0|2|0|0|0|0|9|1C|3|2A|Q|0|3|C|1E|8|1Q|4|1V|4|0|0|9|12|8|1B|4|1S|4|2R|F|0|0|6|G|A|18|7|0|0|J|4|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|19|8|@$9|1A|A|1B|B|L]|$9|1C|A|1D|B|L]|$9|1E|A|1F|B|L]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1G|8|@$9|1H|A|1I|B|L]|$9|1J|A|1K|B|L]|$9|1L|A|1M|B|L]|$9|1N|A|1O|B|L]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1P|8|@$9|1Q|A|1R|B|L]|$9|1S|A|1T|B|L]|$9|1U|A|1V|B|L]|$9|1W|A|1X|B|L]|$9|1Y|A|1Z|B|L]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|20|8|@$9|21|A|22|B|L]|$9|23|A|24|B|L]|$9|25|A|26|B|L]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|27|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|28|8|@$9|29|A|2A|B|L]]|D|@]|E|$]]|$1|V|3|W|5|X|7|2B|8|@]|D|@]|E|$Y|Z]]|$1|10|3|11|5|6|7|2C|8|@]|D|@]|E|$]]|$1|12|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]]|13|$]]

EDIT:

Those three different elements all have different rendering rules.

So for:

<code>table#bar</code> you 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 <code>bar</code> it will expand to its needed width. IF i recall you can counteract this by setting <code>display: block !important;</code> though its been awhile since ive had to fix that. (im sure someone will correct me if im wrong).

<code>textarea#bar</code> i beleive is a block level element so it will follow the rules the same as the div. The only caveat here is that <code>textarea</code> take an attributes of <code>cols</code> and <code>rows</code> which are measured in character columns. If this is specified on the element it will override the width specified by the css.

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

<code>td#foo</code> will be rendered as a <code>table-cell</code> which has some craziness to it. Bottom line here is that for your purposes its going to act just like <code>div#foo</code> as 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.

<hr>

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

<pre><code>#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}
</code></pre>

will give you exactly what you want.

blocks|key|3275468|text|因此，经过研究发现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3275469|对于div#bar设置，display:block;+width:+auto;的作用等同于outerWidth:100%25;|offset|length|style|CODE|3275470|对于一个table#bar，你需要按照下面的规则把它包装在一个div中。所以你的结构变成了：|3275471|<div+id="foo">
+<div+id="barWrap"+style="border....">
++<table+id="bar"+style="width:+100%25;+border:+0;+padding:+0;+margin:+0;">|code-block|syntax|javascript|3275472|这样，该表将占用父div的100%25，并使用#barWrap向#bar表添加边框/边距/填充。请注意，您需要在#barWrap中设置整个事物的背景，并使#bar的背景透明或与#barWrap相同。|3275473|对于textarea#bar和input#bar，你需要做与table#bar相同的事情，缺点是，通过移除边框，你停止了输入/文本区域的本地小部件渲染，#barWrap的边框看起来与其他所有东西都有点不同，所以你可能不得不用这种方式设置所有输入的样式。|3275474|entityMap^0|0|2|7|C|R|19|G|0|4|9|0|0|L|8|U|4|1I|8|23|4|2E|8|0|2|C|F|9|U|9|24|8|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]|$D|Y|E|Z|F|G]|$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@$D|13|E|14|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]|$D|1D|E|1E|F|G]|$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]|$D|1M|E|1N|F|G]|$D|1O|E|1P|F|G]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|T|$]]

So after research the following is discovered:

For a <code>div#bar</code> setting <code>display:block; width: auto;</code> causes the equivalent of <code>outerWidth:100%;</code>

For a <code>table#bar</code> you need to wrap it in a div with the rules stated below. So your structure becomes:

<pre><code>&lt;div id="foo"&gt;
 &lt;div id="barWrap" style="border...."&gt;
 &lt;table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;"&gt;
</code></pre>

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

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

blocks|key|319594|text|使用样式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|319595|left:+0px;|code-block|syntax|javascript|319596|或/和|319597|right:+0px;|319598|319599|top:+0px;|319600|319601|bottom:+0px;|319602|我认为在大多数情况下，这样做是可行的。|319603|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|L|3|M|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|N|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|12|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|T|$]]

Use the styles 

<pre><code>left: 0px;
</code></pre>

or/and

<pre><code>right: 0px;
</code></pre>

or/and

<pre><code>top: 0px;
</code></pre>

or/and

<pre><code>bottom: 0px;
</code></pre>

I think for most cases that will do the job

blocks|key|3062674|text|box-sizing:+border-box;
width:+100%25;
padding:+5px;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3062675|框大小调整:边框；使其包括宽度计算中的填充、边距和边框。|unstyled|3062676|MDN|offset|length|3062677|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing^0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>box-sizing: border-box;
width: 100%;
padding: 5px;
</code></pre>
box-sizing: border box; makes it so that padding, margin and border are included in the width calculations.
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" rel="nofollow noreferrer">MDN</a>

blocks|key|317711|text|对子元素设置display:+'inline-block'对我很有帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|317712|这会将元素的容器紧紧地包裹起来，而不是自动感觉整个线条的宽度。这样，父元素也可以围绕它进行造型，并且不会随子元素一起移动。|317713|entityMap^0|6|N|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

Setting <code>display: 'inline-block'</code> on the child element helped for me.
That would 'wrap' the container of the element tightly around itself, instead of automatically feel the whole line width. This way parent elements can shape around it as well, and do not move with their child element.

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

I have the following markup:

<pre><code>&lt;div id="foo"&gt;
 &lt;div id="bar"&gt;
 here be dragons
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

<pre><code>padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;
</code></pre>

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

Is this possible in pure CSS?

Some more fun with it:

<ul>
<li>What if <code>#bar</code> is a table? </li>
<li>What if <code>#bar</code> is a textarea? </li>
<li>What if <code>#bar</code> is an input?</li>
<li>What if <code>#foo</code> is a table cell (<code>td</code>)? (Does this change the problem or is the problem identical?)</li>
</ul>

<hr>

So far the <code>table#bar</code>, <code>input#bar</code> has been discussed. I have not seen a good solution for textarea#bar. I Think a textarea with no border/margin/padding with a <code>div</code> wrap might work with the <code>div</code> styled to work as borders for the <code>textarea</code>.

How to make CSS width to fill parent?

容器

我相信以前有人问过这个问题，但我似乎找不到答案。我有以下标记：<div id="foo"> <div id="bar"> here be dragons </div></div>我的愿望是让foo具有600px (width: 600px;)的宽度，并使bar具有以下行为：padding-le...

问如何让CSS宽度填充家长？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让CSS宽度填充家长？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让CSS宽度填充家长？
EN