如何使 CSS 的宽度填充父？

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

我有以下标记:

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

我的愿望是使 foo 有 600px(width: 600px;)的宽度，并使酒吧有以下行为:

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的边框。

347799 次浏览
小开

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

alternatively, apply the following styles to bar:

width: auto;
display: block;
小开
最佳答案

EDIT:

Those three different elements all have different rendering rules.

So for:

table#bar 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 bar it 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).

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

input#bar is an inline element, so by default you cant assign it width. However the similar to textarea's cols attribute, it has a size attribute 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.

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

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:

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

will give you exactly what you want.

小开

So after research the following is discovered:

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

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

<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 #barWrap is used to add borders/margin/padding to the #bar table. Note that you will need to set the background of the whole thing in #barWrap and have #bar's background be transparent or the same as #barWrap.

For textarea#bar and input#bar you 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.

小开

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

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

box-sizing: border box; makes it so that padding, margin and border are included in the width calculations.

MDN

小开

Setting display: 'inline-block' 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.


提交答案