爲什麼孩子div超出他們的父母div？

我覺得這很愚蠢，但這是一個非常簡單的問題，不明白如何解決。在下面的代碼中，爲什麼容器，主要和次要div延伸到標題之外？我知道這是因爲我已經分配給容器的填充而發生的，但我已經爲html元素指定了最大寬度。 header元素服從最大寬度，但容器及其子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。

您應該將box-sizing: border-box;添加到.cointainer以確保寬度爲100％（example）。

來源

2014-08-29 15:33:05

或者只是從容器中刪除'width：100％'聲明。這是一個div，所以它默認爲100％。 – 2014-08-29 15:34:59

[瀏覽器兼容性]（http://caniuse.com/#search=box-sizing） - 在IE8（有些問題）和IE9 +中提供了「盒子大小：邊框」。 – misterManSam 2014-08-29 15:37:45

我明白了。但是我在框體選擇器中設置了框大小設置。由於容器在體內，因此我認爲它將由人體的盒子尺寸選擇器來控制。 – William 2014-08-29 15:37:52

爲什麼孩子div超出他們的父母div？

回答

相關問題