如何使CSS宽度填充父级？

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

这在纯CSS中是否可行？

更有趣的是:

• 如果#bar是一张桌子怎么办？
• 如果#bar是textarea怎么办？

• 如果#bar是输入怎么办？

• 如果#foo是表格单元格(td)怎么办？(这会改变问题还是问题相同？)

---

到目前为止table#bar,input#bar已经讨论过了.我还没有看到textarea#bar的好解决方案.我认为没有边框/边距/填充的textarea div可以使用div样式作为边框textarea.

Answer 1

编辑:

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

因此对于:

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

textarea#bar我相信是一个块级元素,因此它将遵循与div相同的规则.这里唯一需要注意的是,textarea取一个属性,cols并rows在字符列中进行测量.如果在元素上指定了它,它将覆盖css指定的宽度.

input#bar是一个内联元素,所以默认情况下你不能指定它的宽度.但是类似于textarea's cols属性,它size在元素上有一个可以确定宽度的属性.也就是说,您可以通过display: block;在css中使用它来指定宽度.然后它将遵循与div相同的渲染规则.

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

这是块级元素的默认行为 - 即.如果width是auto(默认值),那么它将是包含元素内部宽度的100%.所以本质上:

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

会给你你想要的东西.

Answer 2

几乎就在那里,只需更改outerWidth: 100%;为width: auto;(outerWidth不是CSS属性)

或者,将以下样式应用于bar:

width: auto;
display: block;

Answer 3

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

box-sizing：边框框；使得内边距、边距和边框都包含在宽度计算中。

MDN

Answer 4

使用样式

left: 0px;

和/或

right: 0px;

和/或

top: 0px;

和/或

bottom: 0px;

对于大多数可以完成工作的案例,我认为