如何擴大div的正確寬度？

Question

我想一個div右側的寬度擴大到100％（看截圖，我的div是紅色的），我試圖用：

HTML例如：

<header> 
    <nav> 
     <ul> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
     </ul> 
    </nav> 
    <aside> 
     <h1>Logo</h1> 
    <aside> 
</header> 

CSS：

header { 
    width: 1024px; 
    height: 395px; 
    margin: 0 auto; 
} 

nav { 
    height: 60px; 
    width: 690px; 

    position: absolute; 
    top: 20px; 
    right: 0; 

    background:red; 
} 

這工作正常，但是當我嘗試縮小（ctrl - ）菜單導航列表從容器中出去。標誌保持居中，但不導航。

感謝您的幫助！
對不起，我的英語不好。

Answer 1

我認爲你正在尋找這樣的：jsfiddle。將position: relative添加到您的標題。之後，您的導航定位將相對於您的標題行爲。並且爲了正確的對齊，請將導航的top: 20px更改爲top: 0。

Answer 2

如果您希望紅色條總是延伸到窗口的右邊緣，即使放大並縮小瀏覽器窗口，也可以將此條的寬度設置爲非常高的值（例如500％）。這將向右擴展很多，但會添加一個水平滾動條。 所以設置以下簡單地隱藏溢出：

html,body 
{ 
    overflow-x:hidden; 
}