跨浏览器方法使子 div 适合其父级的宽度

Posted 2023-02-19

【中文标题】跨浏览器方法使子 div 适合其父级的宽度

【英文标题】：Cross browser method to fit a child div to its parent's width

【发布时间】：2011-09-29 10:07:55

【问题描述】：

我正在寻找一种解决方案，让孩子 div 适合其父母的 width。

我在这里看到的大多数解决方案不兼容跨浏览器（例如，display: table-cell; 不支持 IE <=8）。

【问题讨论】：

如果我猜对了，请不要在孩子身上声明宽度。

【参考方案1】：

解决办法就是不声明width: 100%。

默认为width: auto，对于块级元素（例如div），无论如何都会占用可用的“完整空间”（与width: 100% 的做法不同）。

见：http://jsfiddle.net/U7PhY/2/

以防万一我的回答还不清楚：只是不要在孩子div 上设置width。

你可以改为be interested in box-sizing: border-box。

【讨论】：

我认为只有一个孩子？

是的，我认为你是对的。该图使我感到困惑:(幸运的是，我已经写了答案的“第二部分”，这就是这里的实际答案。

你根本不需要为孩子声明宽度属性。

您项目中包含的组件的样式属性可能会设置width 属性并导致问题。在这种情况下，为子 div 显式设置 width: auto。

【参考方案2】：

您可以使用box-sizing css 属性，它是跨浏览器（ie8+ 和所有真正的浏览器），对于这种情况非常好的解决方案：

#childDiv
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;

Fiddle

【参考方案3】：

如果你把position:relative;放在外层元素上，内层元素会按照这个放置自己。那么内部元素上的width:auto; 将与外部元素的宽度相同。

【讨论】：

然后只需删除width:100%;，该框将自动适应。

【参考方案4】：

在您的图像中，您将填充放在孩子之外。不是这种情况。内边距会增加元素的宽度，因此如果您添加内边距并将其宽度设置为 100%，它将具有 100% + 内边距的宽度。为了您想要的，您只需向父 div 添加填充，或向内部 div 添加边距。因为 div 是块级元素，它们会自动扩展到其父级的宽度。

【讨论】：

我上传了一张新图片 - 抱歉，图表不好！我当然知道填充是什么意思；）

【参考方案5】：

如果您想使用该填充空间......那么这里有一些东西：

http://jsfiddle.net/qD4zd/

所有颜色都是背景色。

【参考方案6】：

您的子 div 中甚至不需要 width: 100%：

http://jsfiddle.net/DanielDZC/w2mev/1/