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

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. 包括-moz-仍然需要它的 Firefox 前缀：

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