如何让CSS宽度填充家长？
我相信以前有人问过这个问题，但我似乎找不到答案。
我有以下标记：
<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%;换句话说，不是将bar的宽度设置为592px，而是将bar的外部宽度设置为100%，以便将其计算为592px。这里的重要之处在于，我可以将foo的宽度更改为800px，并且bar将在渲染时进行计算，而不必手动计算所有这些实例。
这在纯CSS中是可能的吗？
更多的乐趣：
- 如果
#bar是表格怎么办？ - 如果
#bar是文本区域怎么办？ - 如果
#bar是输入怎么办？<代码>H217<代码>H118如果<代码>D19是表格单元格(<代码>D20)怎么办？(这是改变了问题还是相同的问题？)
到目前为止，已经讨论了table#bar、input#bar。我还没有看到一个好的textarea#bar解决方案。我认为没有边框/边距/填充的文本区可以与div样式一起工作，作为textarea的边框。
回答 6
Stack Overflow用户
发布于 2010-02-10 04:54:29
编辑
这三个不同的元素都有不同的呈现规则。
因此，对于：
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;}会给你你想要的东西。
Stack Overflow用户
发布于 2010-02-10 04:54:11
差不多了，只需将outerWidth: 100%;更改为width: auto; (outerWidth不是CSS属性)
或者，将以下样式应用于bar：
width: auto;
display: block;Stack Overflow用户
发布于 2014-10-01 20:31:47
使用样式
left: 0px;或/和
right: 0px;或/和
top: 0px;或/和
bottom: 0px;我认为在大多数情况下，这样做是可行的。
https://stackoverflow.com/questions/2232440
复制相似问题
腾讯云开发者
