防止孩子的填充/边框溢出父母

Question

jsbin.com

上的问题演示

我希望孩子，包括它的填充和边框，完全包含在父母中。

我想要一个允许我将子宽度指定为100％的解决方案，如演示中所示。

截图

HTML

<div class="container">
  <div class="child">
    some content
  </div>  
</div>

CSS

.container {
  max-width:400px;
  padding:0px;
  border:1px solid green;
}

.child {
  padding: 10px; 
  width:100%;
  border:30px solid #f2f2f2;
  text-align:right;
}

Answer 1

使用box-sizing: border-box。包括仍需要它的Firefox的-moz-前缀：

.child {
  padding: 10px; 
  width:100%;
  border:30px solid #f2f2f2;
  text-align:right;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}