Css 宽度100%超出包裹范围

宽度100%不工作！我的页脚超出了

#wrap

，我不想为其设置精确的像素

有解决办法吗

#换行{
边框：1px实心#ccc；
明确：两者皆有；
显示：表格；
垂直对齐：中间对齐；
位置：相对位置；
宽度：400px；
保证金：0自动10px；
填充：10px；
}
页脚{
明确：两者皆有；
背景:#f3；
边框：1px实心#ccc；
边界半径：5px；
浮动：左；
保证金：0；
填充：10px；
宽度：100%；
溢出：自动；
最小高度：100%；
高度：自动！重要；
}

&抄袭；2013年普亚当斯和米德多&米德多&米德多&米德多；

您正在使用容器上的display:table。这意味着直接子项（在本例中为“页脚”）应显示为：表格单元格。

当您说

宽度：100%不包括填充，因此您有
宽度：100%
+
填充：10px
，它提供100%+20px的宽度

一个简单的解决方案是添加
框大小：边框框

footer { box-sizing: border-box; }

这是默认的长方体模型行为：

Width = width + padding-left + padding-right + border-left + border-right

因此，您的宽度为100%+2*10px，大于页脚的宽度

你可以：

删除
width:100%
，这将导致隐式使用
width:auto
（这很好，因为块元素会自动填充其父元素的宽度）
使用
框大小：边框框
属性
要获得更深入的解释，只需看看这个和

问候。
太好了

谢谢大家

box-sizing: border-box;

-moz-box-sizing:border-box; /* Firefox */

我已将页脚更新为：显示：表格单元格；仍然不工作，你不需要100%宽度元素上的浮动。移除它。它现在应该可以工作了。在你的例子中仍然超出了包装。你忘了添加moz前缀，现在就看。我认为这是一个错误的方法。他的语义学是错误的。当他使用正确的语义方法时，问题会自动得到解决，而无需使用新的框大小调整方法。谢谢，我确实忘记了FF前缀！