为什么这个父元素没有完全包含它的孩子？

当我的浏览器窗口最大化时，此代码可以正常工作，子项包含在父项中，父项跨越浏览器的宽度。然而，当浏览器窗口比子元素宽度越小，则父元素不包含它为什么这个父元素没有完全包含它的孩子？

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Example</title> 

     <style type="text/css"> 
      #toolbar { 
       background-color:#cccccc; 
       padding:10px 0; 
      } 

      #nav { 
       background-color:#00cccc; 
       margin:0 auto; 
       width:1000px; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="toolbar"> 
      <div id="nav">NAVIGATION</div> 
     </div> 

    </body> 
</html>

我可以通过浮置解决问题（在铬20和Firefox 13测试）父母并给它100％的最低限度，但这似乎是错误的。我能做些什么来解决这个问题？

来源

2012-07-11 michael

#toolbar是一个方块层级元件，缺省width:100% - 100％的宽度有关的父元素。这是它遵守的规则，让它在宽度超过的情况下溢出。你可以通过设置overflow属性来调整它。

但是，如果您想要父div将其子宽度考虑在内，请设置最小宽度（与子级的宽度相同）重要：必须考虑可能的边距和填充（或更改框模型到边框）。

#toolbar { 
    min-width:1000px; 
}

来源

2012-07-11 10:06:32 Christoph

我发布了这个问题后，我做了一些阅读，并意识到我对块级元素工作原理的理解是错误的。 – michael 2012-07-11 10:32:22

解决这个问题的最简单和最合适的方法是remove the 1000px width from #nav（它真的在那里做什么？）。

或者，给#toolbaroverflow: hidden将achieve the same visual effect。

来源

2012-07-11 10:04:40 Jon

最终，#toolbar将具有背景色（跨越页面宽度）和#nav将包含在页面上居中站点导航所以它不可能除去宽度 – michael 2012-07-11 10:07:37

尝试最小宽度：上1000像素的NAV

#nav { 
     background-color:#00cccc; 
     margin:0 auto; 
     min-width:1000px;/*New style*/ 
    }

来源

2012-07-11 10:05:38 Chin

最小宽度没有修复它 – michael 2012-07-11 10:07:59

声明是在错误的元素 – Christoph 2012-07-11 11:26:25

 #toolbar { 
      background-color:#cccccc; 
      padding:10px 0; 

      overflow: hidden; 
     }

来源

2012-07-11 10:06:23

那没有修复它 – michael 2012-07-11 10:11:43

对不起，我把溢出错误的元素。将它移动到#toolbar中，就像在我编辑的答案中一样。 – 2012-07-11 10:29:39

为什么这个父元素没有完全包含它的孩子？

回答

相关问题