跨浏览器方法，以适应一个孩子div到其父母的宽度

我正在寻找一个解决scheme，以适应一个孩子的div到它的父母的width 。

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

Answer 1

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

缺省值为width: auto ，对于块级元素（例如div ），将占用“全部空间”（不同于width: 100% ）。

请参阅： http : //jsfiddle.net/U7PhY/2/

以防万一它不是已经从我的答案清楚：只是不要在子div上设置一个width 。

Answer 2

你可以使用box-sizing css属性，它是交叉浏览器（ie8 +，以及所有真实的浏览器）以及相当不错的解决scheme：

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

小提琴

Answer 3

你甚至不需要width: 100%在你的孩子div：

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

Answer 4

在你的图像中，你已经把垫子放在孩子的外面了。 不是这种情况。 填充添加到一个元素的宽度，所以如果你添加填充，并给它一个100％的宽度，它将有100％的宽度+填充。 为了你想要什么，你只需要添加填充到父div，或者添加一个边距到内部div。 因为div是块级元素，所以它们会自动扩展到父级的宽度。

Answer 5

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

Answer 6

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

http://jsfiddle.net/qD4zd/

所有的颜色都是背景颜色。