响应式设计中的嵌套式DIV - 边距，填充等

Question

这已经有一段时间了，因为我真的处理了网页设计中的百分比。我有一个嵌套的DIV，它位于一个容器内，但容器的填充将它推到100％的宽度以外。不希望开始尝试和错误的过程，看看它是如何使其尽可能接近100％的宽度，我如何才能实现舒适贴合？我还注意到，当我调整窗口的大小并使空间变小时，右手边的垫子变得更小了。

<div id="block"> 
    <div class="inside">ssdfsdfdfsfdf</div> 
</div> 

#block { 
    width: 100%; 
    background-color: #CCC; 
    padding: 20px; 
} 
.inside { 
    height: 200px; 
    background-color: #333; 
} 

http://jsfiddle.net/AndyMP/cs2U9/4/

Answer 1

使用box-sizing CSS属性＃阻止元素。

#block { 
    width: 100%; 
    background-color: #CCC; 
    padding: 20px; 

    -o-box-sizing: border-box; /* Opera */ 
    -ms-box-sizing: border-box; /* IE */ 
    -moz-box-sizing: border-box; /* Mozilla */ 
    -webkit-box-sizing: border-box; /* Chrome, Safari */ 
    box-sizing: border-box; 
} 

关于CSS盒子施胶性：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

我需要一个

overflow: hidden 

在容器DIV

为了让它坐在完美。

http://jsfiddle.net/AndyMP/cs2U9/6/