Probleme mit der Breite in der Kopfzeile

Question

Ich versuche eine "Leiste" zu erstellen, die sich über den oberen Rand meiner Webseite (wie Facebook) erstreckt. Dann habe ich einige Navigationslinks auf der rechten Seite. Wenn Sie jedoch die Größe der Seite ändern und dann die horizontale Bildlaufleiste verwenden, fehlt der rote Hintergrund.

http://jsfiddle.net/ejJnL/embedded/result/

http://jsfiddle.net/ejJnL/

<div class="header-container"> 
    <div class="header"> 
     <ul class="main-navigation"> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
      <li><a href="#">C</a></li> 
      <li><a href="#">D</a></li> 
      <li><a href="#">E</a></li> 
     </ul> 
     <div class="clear"></div> 
    </div> 
</div> 

CSS:

.header-container { 
    background-color: red; 
    height: 40px; 
    width: 100%; 
} 

.header { 
    height: 100%; 
    line-height: 40px; 
    margin: 0 auto; 
    width: 960px; 
} 

.header img { 
    vertical-align: middle; 
} 

.main-navigation { 
    float: right; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.main-navigation li { 
    float: left; 
} 

.main-navigation a { 
    color: #ffffff; 
    font-weight: bold; 
    text-decoration: none; 
} 

Answer 1

.header-container { 
    background-color: red; 
    height: 40px; 
    position: fixed: 
    left: 0; 
    right: 0; 
} 

1. die Position fixieren und erklären, nach links angebracht und rechten Rand des Darstellungs wie gezeigt ab Ove.

2. Sie brauchen keine Deklarationen der Breite: 100% oder Höhe: 100% wie div sind bereits Blockelemente und füllen ihre Container.

3. Sie sollten body { margin:0} deklarieren, wenn die Leiste auf die Seitenränder erweitert werden soll.

4. sollten Sie wahrscheinlich verwenden max-width nicht width für Ihre .header so das Menü zeigt nach wie vor in einem kleinen Fenster.

5. Sie auch ein overflow: none zum .header-container

Answer 2

http://jsfiddle.net/SbpZG/

Feste Breite auf der .header-container und position: relative auf dem .main-navigation