爲什麼這個父元素沒有完全包含它的孩子？

當我的瀏覽器窗口最大化時，此代碼可以正常工作，子項包含在父項中，父項跨越瀏覽器的寬度。然而，當瀏覽器窗口比子元素寬度越小，則父元素不包含它爲什麼這個父元素沒有完全包含它的孩子？

<!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

爲什麼這個父元素沒有完全包含它的孩子？

回答

相關問題