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

72

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

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

该图显示了预期结果，其中子div是其父项的完整大小，并带有内部填充

— 伴侣64
source

1

如果我没事，请不要声明孩子的身高。

— 伊万·伊万尼奇（IvanIvanić）2011年

75

解决的办法是根本不声明 width: 100%。

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

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

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

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

— 三十点
source

3

我认为只有一个孩子？

— 伊万·伊凡尼奇（IvanIvanić）2011年

是的，我认为您是对的。该图使我感到困惑：（（幸运的是，我已经写出了答案的“第二部分”，这是这里的实际答案。）

— November11年

您完全不需要为child声明width属性。

— Daniel Gruszczyk

1

样式属性可能是项目中包含的组件的一部分，正在设置该width属性并引起问题。在这种情况下，width: auto为子div明确设置。

— StackOverflowUser 2015年

24

您可以使用box-sizingcss属性，它是跨浏览器（即8+，以及所有实际的浏览器），并且是针对此类情况的很好的解决方案：

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

小提琴

— 普祖连科
source

1

在您的图像中，您已将填充物放在孩子的外面。不是这种情况。填充会增加元素的宽度，因此，如果添加填充并为其设置100％的宽度，则其宽度将为100％+填充。为了满足您的需要，您只需要向父div添加填充或向内部div添加边距即可。由于div是块级元素，因此它们将自动扩展到其父级的宽度。

— 亚历克斯
source

我上传了一张新图片-对不起，这张图表不好！我当然知道填充的含义；）

— mate64 2011年

1

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

— 史蒂文
source

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

— 2011年

1

如果您想使用该填充空间...那么这里是：

http://jsfiddle.net/qD4zd/

所有颜色均为背景色。

— 乔纳斯
source

1

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

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

— 丹尼尔·格鲁斯奇克（Daniel Gruszczyk）
source