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

Question

我正在寻找一种解决方案,让孩子div适应它的父母width.

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

显示预期结果的图像,其中子div是其父级的完整大小,具有内部填充

Answer 1

解决方案是不要声明width: 100%.

默认情况下width: auto,对于块级元素(例如div),无论如何都将采用"完整空间"(width: 100%与其如何不同).

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

以防万一我的回答还不清楚:只是不要width对孩子说话div.

Answer 2

您可以使用box-sizingcss属性,它的crossbrowser(ie8 +,以及所有真正的浏览器)以及针对此类情况的非常好的解决方案:

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