为什么孩子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？

回答

相关问题