하위 div가 상위 div를 초과하는 이유는 무엇입니까?

나는 이것을 묻는 것이 어리 석다고 느낀다. 그러나 이것은 해결 방법을 이해하지 못하는 매우 간단한 문제이다. 아래 코드에서 컨테이너, 주 및 보조 div가 헤더를 넘어서 확장되는 이유는 무엇입니까? 컨테이너에 할당 한 패딩 때문에 발생하지만 최대 너비는 html 요소에 할당되어있는 것으로 알고 있습니다. 헤더 요소는 최대 너비를 준수하지만 컨테이너와 하위 div는 그렇지 않습니다. 나는 비슷한 질문을 여기에서 보았지만 나는 나의 특정한 상황과 관련이 있다고 생각한 것을 보지 못했다. 무슨 일 이니?하위 div가 상위 div를 초과하는 이유는 무엇입니까?

감사합니다.

enter image description here

인 test.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <link rel="stylesheet" href="../reset.css" /> 
    <style type="text/css"> 
     html { 
      max-width: 960px; 
      margin: 0 auto; 
      position: relative; 
     } 
     header { 
      height: 2.5em; 
      background: #2a3744; 
      color: #fff; 
     } 
     body { 
      font-size: 100%; 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
     } 
     .container { 
      width: 100%; 
      padding: 1em; 
      margin: 0 auto; 
      background: #ccc; 
     } 
     .main { background: #cf6; } 
     .secondary { background: #fc6; } 
    </style> 
</head> 
<body> 
    <header role="banner"> 
     header 
    </header> 
    <div class="container"> 
     <div class="main"> 
      main   
     </div> 
     <div class="secondary"> 
      secondary 
     </div> 
    </div> 
</body> 
</html>

출처

2014-08-29 William

함께 width:100% 함께 용기에 padding: 1em 실제 폭 100% + 2em한다.

너비가 100 % (example)인지 확인하려면 box-sizing: border-box; ~ .cointainer을 추가해야합니다.

출처

2014-08-29 15:33:05

또는 'width : 100 %'선언을 컨테이너에서 제거하십시오. div이기 때문에 기본적으로 100 %의 너비입니다. –

[브라우저 호환성] (http://caniuse.com/#search=box-sizing) - 상자 크기 : border-box는 IE8 (일부 문제 포함) 및 IE9 +에서 사용할 수 있습니다. – misterManSam

나는 본다. 그러나 나는 몸체 선택기에 상자 크기 설정을했습니다. 콘테이너가 몸 안에 있기 때문에, 나는 몸의 상자 크기 선택 자에 의해 경세 될 것이라고 나는 생각할 것입니다. – William

하위 div가 상위 div를 초과하는 이유는 무엇입니까?

답변

관련 문제