宽度100％超出包装范围

Question

宽度100％不起作用！我的页脚在#wrap之外，我不想为它设置精确的像素。

有解决方案吗

live example。

#wrap {
  border: 1px solid #ccc;
  clear: both;
  display: table;
  vertical-align: middle;
  position: relative;
  width: 400px;
  margin: 0 auto 10px;
  padding: 10px;
}

footer {
  clear: both;
  background: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 5px;
  float: left;
  margin: 0;
  padding: 10px;
  width: 100%;
  overflow: auto;
  min-height: 100%;
  height: auto !important;
}

<div id=wrap>
  <footer>&copy; 2013 PUAction&nbsp;&middot;&nbsp;<a href="#">Terms</a>&nbsp;&middot;&nbsp;<a href="#">Disclaimer</a>&nbsp;&middot;&nbsp;<a href="#">Privacy</a>&nbsp;&middot;&nbsp;<a href="#">Login</a></footer>
</div>

Answer 1

这是默认的盒子模型行为：

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

因此，您的宽度是100％+ 2 * 10px，这比页脚的宽度大...

您可以 ：

1. 删除width: 100%，这将导致隐式使用width: auto（这很好，因为块元素会自动填充其父元素的宽度）
2. 使用box-sizing: border-box属性

如需更深入的解释，请看看这个resource和this one！

问候。

Answer 2

你在容器上使用display：table。这意味着直接孩子（在这种情况下是“页脚”）应该显示：table-cell。

Answer 3

当你说width: 100%;不包括填充，所以你有width:100% + padding: 10px给你100％+ 20px宽度。

一个简单的解决方案是添加box-sizing: border-box;

footer { box-sizing: border-box; }

Demo

Answer 4

完美！

多谢你们 ！

box-sizing: border-box;

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

http://jsfiddle.net/2P6KR/9/