CSS如何将父级div填满100%？

Question

我希望能够让子元素span充满父元素div，但是问题在于我想要使用的span是经过themeroller主题处理的，它具有不同的填充和边距。因此，我无法硬编码span高度的任何大小。

如果我尝试将span的高度设置为100％，那么它实际上会超出并填充更多，例如对于这个主题来说，它会超过100％+ 6像素（但超出的数量因主题而异）。如何使其无论span的填充/边距大小如何，都只能填充父div的100％？

非常感谢您的帮助。

- w.donahue

---

你应该了解一下 box-sizing: border-box;。 - jessegavin

是的，我在构建我的代码片段时注意到了，jessegavin在他的评论中已经给出了“简短版本”的答案。 - ScottS

Answer 1

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

请查看http://jsfiddle.net/mbB8t/2/

澄清: 适用于所有现代浏览器 (IE8+).

- ScottS

---

如果父元素使用了padding，这种方法似乎不起作用。这个是您的确切示例，只需将div margin更改为padding即可。您知道如何使用padding实现相同的结果吗？谢谢。 - Jake

@Jake：鉴于父级div的配置有额外的限制，如果您不能（或不想）将其padding移除，则可能您唯一的选择是使用定位来实现。这也可能是不可取的，具体情况而定。 - ScottS

Answer 2

为了使这个工作正常运行，您必须通过添加跨度的2倍宽度加上高度来计算填充和边距值。然后，您就可以知道要使用哪些值来使跨度填充父div。在此处查看示例 http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding。

- Charming Prince