반응 형 디자인의 중첩 된 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; 
} 

#BLOCK 요소

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

Answer 1

사용 box-sizing CSS 속성. 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; 
} 

는 :

Answer 2

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 나는 그것을 완벽하게 앉아 얻기 위해 컨테이너 DIV에

overflow: hidden 

이 필요했습니다.

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