如何让CSS宽度填充父项？

问题描述：

我确信这个问题以前已经被问过，但我似乎无法找到答案。如何让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是一个textarea？
如果#bar是一个输入？
如果#foo是表单元格（td）会怎么样？（这是否改变的问题，或者是相同的问题？）

到目前为止table#bar，input#bar进行了讨论。我还没有看到textarea＃bar的好解决方案。我认为一个没有边界/边距/填充的文本区域可以与div包装配合使用，div样式可以用作textarea的边框。

答

编辑：

那么那些三个不同的元素都有不同的重新映射规则哈哈。

所以对：

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

textarea#bar我beleive是块级别的元素，所以它将遵循与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;}

会给你正是你想要的。

嘿，谢谢。无论如何也决定流血的桌子也很有趣。我认为表格与divs具有相同的行为？ – 2010-02-09 21:00:25

@Dimitry：不，他们有特殊的规则，比''block'元素更像'inline-block'。请注意，虽然我说**更像**而不是**相同** :-)你可能遇到的是，除非另有定义，否则它们通常会扩展以容纳所有可能非常烦人的列，如果某些标题/细胞中有很长的不可撕开的文字。 – prodigitalson 2010-02-09 21:04:57

感谢您的帮助:)让我更新一下这个问题，给出一个更全面的问题概述，并希望所有的解决方法都可以在一节中列出。 – 2010-02-09 21:08:49

答

几乎没有，只是改变outerWidth: 100%;到width: auto;（outerWidth不是CSS属性）

另外，应用以下样式吧：

width: auto; 
display: block;

如果他在'bar'上设置了一个空白边缘，那么这将无法正常工作，因为这会被添加到有效地使'bar'比其父'foo'更宽的100％。 – prodigitalson 2010-02-09 20:55:38

是的，我回答那个太快了; P – Rowan 2010-02-09 20:56:29

等一下。所以，如果我将宽度属性设置为任何值，它会流血？宽度：自动不是解决方案，而不是设置宽度是？ – 2010-02-09 21:05:52

答

所以经过研究以下发现：

对于div#bar设置display:block; width: auto;引起outerWidth:100%;

相当于为你需要用它与下面陈述的规则一个div一个table#bar。所以，你的结构变为：

<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，不好的一面是，通过消除边界您停止输入/ textarea的的本地部件的渲染和#barWrap的边框看起来会比一切都有点不同否则，所以你可能不得不以这种方式来设计你的所有输入。

答

使用的样式

left: 0px;

或/和

right: 0px;

或/和

top: 0px;

或/和

bottom: 0px;

我认为大多数情况下会做这项工作

这是最好的答案 – 2016-06-06 10:25:28

你是英雄。我今天学了些新东西。谢谢！ – Gogol 2017-12-19 12:23:33

如何让CSS宽度填充父项？

相关推荐