Question

我确信之前已经问过这个问题，但我似乎无法找到答案。

我有以下标记：

<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，并且栏会在渲染时计算，而不是我必须手动对所有这些实例进行数学运算。

这在纯CSS中是否可行？

更有趣的是：

如果#bar是一张桌子怎么办？
如果#bar是textarea怎么办？
如果输入#bar怎么办？
如果#foo是表格单元格（td）怎么办？（这会改变问题还是问题相同？）

目前已讨论table#bar，input#bar。我还没有看到textarea＃bar的好解决方案。我认为没有边框/边距/填充和div换行的textarea可以使用div样式作为textarea的边框。

Answer 1

修改：

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

所以：

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

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

input#bar是一个内联元素，因此默认情况下您无法为其指定宽度。但是，与textarea的{{1}}属性类似，它在元素上具有cols属性，可以确定宽度。也就是说，您可以在css中使用size来指定宽度。然后它将遵循与div相同的渲染规则。

display: block;将呈现为td#foo，它有一些疯狂。这里的底线是，为了您的目的，就限制其内容的宽度而言，其行为就像table-cell一样。这里唯一的问题是在某个列的某个位置会出现潜在的无法阻塞的文本，这会使它忽略您的宽度设置。此外，列中的所有单元格都将获得最宽单元格的宽度。

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

auto

会给你你想要的东西。

Answer 2

几乎就在那里，只需将outerWidth: 100%;更改为width: auto;（outerWidth不是CSS属性）

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

width: auto;
display: block;

Answer 3

使用样式

left: 0px;

或/和

right: 0px;

或/和

top: 0px;

或/和

bottom: 0px;

我认为对于大多数能够完成工作的案例

Answer 4

经过研究后发现了以下内容：

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

对于table#bar，您需要将其包含在具有下述规则的div中。所以你的结构变成了：

<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的边框看起来与其他所有内容略有不同，因此您可能需要以这种方式设置所有输入的样式。

Answer 5

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

box-sizing：边框；这样就可以在宽度计算中包括填充，边距和边框。

MDN

Answer 6

在子元素上设置 display: 'inline-block' 对我有帮助。

这会将元素的容器“包裹”在其自身周围，而不是自动感觉到整个线宽。这样父元素也可以在它周围形成形状，并且不随其子元素移动。

如何使CSS宽度填充父级？

6 个答案: