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

【问题标题】：Cross browser method to fit a child div to its parent's width跨浏览器方法使子 div 适合其父级的宽度
【发布时间】：2011-09-29 10:07:55
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

所有颜色都是背景色。

【讨论】：

【解决方案6】：

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

【讨论】：