Question

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

任何解决方案？

#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，大于页脚的宽度......

你可以：

删除width: 100%会导致隐式使用width: auto（这很好，因为块元素会自动填充其父级的宽度）
使用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/

宽度100％超出包装范围

4 个答案: