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

Question

我正在寻找一种解决方案，将子 div 放入其父级 width 中。

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

Answer 1

解决方案是简单地不声明 width: 100%。

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

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

只是如果我的回答还不清楚：只是不要在子 div 上设置 width 。

相反，您可能对box-sizing: border-box感兴趣。

Answer 2

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

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

小提琴

Answer 3

如果将 position:relative; 放在外部元素上，内部元素将根据此元素放置自身。然后内部元素上的 width:auto; 将与外部元素的宽度相同。

Answer 4

在您的图像中，您已将填充物放在孩子外面。事实并非如此。内边距会增加元素的宽度，因此如果添加内边距并为其指定 100% 的宽度，它将具有 100% + 内边距的宽度。为了达到您想要的效果，您只需要向父 div 添加填充，或者向内部 div 添加边距。因为 div 是块级元素，所以它们会自动扩展到其父元素的宽度。

Answer 5

您甚至不需要在子 div 中使用 width: 100%：

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

Answer 6

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

http://jsfiddle.net/qD4zd/

所有颜色均为背景色。