問題菜單欄的一部分消失在重新調整

Question

我有一個網站，我正在設計和我遇到了調整大小的問題。

這是我的網站，當鉻28.0最大化時： ，你可以看到灰色的菜單欄達到一路。

然而，當我去改變窗口大小：

爲DIV（的#header）的代碼是：

 
#header { 
    background-color: #dcdcdc; 
    border-bottom: 1px solid #e6e6e6; 
    padding: 27px 0; 
} 

所以沒有設置寬度。

發生了什麼事？

編輯：2013年11月1日 這裏是我的頭HTML：

<div id="header"> 
     <div> 
      <div class="logo"> 
       <a href="index.html">Thumbnails</a> 
      </div> 
      <ul id="navigation"> 
       <li class="active"> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="features.html">Features</a> 
       </li> 
       <li> 
        <a href="news.html">News</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 

編輯：2013年11月1日 Firefox的截圖：

我添加了一個屏幕截圖從Firefox並且問題也會影響頁腳（也發生在Chromium中）

Answer 1

簡化了你的html + css之後，我想出了一個看似按預期工作的解決方案。我相信問題在於你設置了填充+邊距的方式。

的HTML：

<div class="page-container"> 

    <header class="top-bar"> 
     <div class="inner"> 

      <h2 class="logo">Logo</h2> 

      <ul class="main-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Features</a></li> 
       <li><a href="#">News</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 

     </div> 
    </header> 

    <section class="main-content"></section> 

    <footer class="bottom-bar"> 
     <div class="inner"> 

      <span class="copyright">Copyright info here.</span> 

      <span class="contact">Contact info here.</span> 

     </div> 
    </footer> 

</div> 

</body> 

的CSS：

body { 
    margin: 0; 
    padding: 0; 
} 

.page-container { 
    margin: 0; 
    padding: 0; 
} 



/* =============================================== 
/* ====== HEADER + NAVIGATION STYLES 
/* ============================================ */ 

.top-bar { 
    background: #EEE; 
    height: 100px; 
    text-align: center; 
} 

.inner { 
    background: #DDD; 
    display: block; 
    height: 100px; 
    margin: 0 auto; 
    width: 920px; 
} 

.logo { 
    background: #CCC; 
    display: block; 
    float: left; 
    font-size: 16px; 
    height: 30px; 
    line-height: 30px; 
    margin: 0; 
    padding: 35px 0; 
    width: 120px; 
} 

.main-nav { 
    display: block; 
    float: left; 
    height: 30px; 
    line-height: 30px; 
    margin: 0; 
    padding: 35px 0; 
} 

.main-nav li { 
    display: block; 
    float: left; 
    width: 160px; 
} 

.main-nav li a { 
    color: #999; 
    font-size: 14px; 
    text-decoration: none; 
} 

.main-nav li.active a, 
.main-nav li a:hover { 
    color: #F99600; 
} 



/* =============================================== 
/* ====== MAIN CONTENT PLACEHOLDER STYLES 
/* ============================================ */ 

.main-content { 
    background: #F6F6F6; 
    height: auto; 
    margin: 0 auto; 
    min-height: 500px; 
    width: 920px; 
} 



/* =============================================== 
/* ====== FOOTER ELEMENT STYLES 
/* ============================================ */ 

.bottom-bar { 
    background: #EEE; 
    height: 100px; 
} 

.bottom-bar .copyright, 
.bottom-bar .contact { 
    display: block; 
    font-size: 12px; 
    height: 30px; 
    line-height: 30px; 
    margin: 0; 
    padding: 35px; 
} 

.copyright { float: left; } 
.contact { float: right; } 

您可以檢查出這裏的工作代碼：http://jsfiddle.net/onestepcreative/X8QbD/