html - div 中的宽度 div 使用 100% 并有填充

Question

我想将一个 div 放在另一个 div 中，并且在那个 div 中有一个 10px 的填充，这是 div 宽度到 100%。但是要做到这一点，div 会超出父 div。

jsFiddle 中的示例:

http://jsfiddle.net/kCypn/5/

.caixa
{   
    float : left;
    width:100%;    
    background-color:white;
    padding:25px;
}

我遇到的另一个问题是，我有一个左对齐的 div，宽度为 150px，另一个 div 占据了所有剩余的空间和填充。

Answer 1

默认情况下，CSS 框模型将元素的最终宽度计算为其 width、border 和 padding 的总和。您可以使用 box-sizing 属性克服这种令人困惑的行为:

.caixa
{   
    float : left;
    width:100%;    
    background-color:white;
    padding:25px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/kCypn/7/

了解它:http://css-tricks.com/box-sizing/
浏览器支持:http://caniuse.com/#feat=css3-boxsizing