窗口大小調整導致第二個div重疊在第一個

Question

我正在一個網站上，它包含三個div（一個標題和兩個下面）。現在，當我調整窗口大小時，第二個分區內容在第一個nav上重疊。
下面是代碼的HTML：

<div id = "container"> 
<div id="header"> 
<center><img src = "images/logo.png" /></center> 
</div> 
<br /> 
<div id="nav"> 
<center><br /> 
<a href='#'>Index</a><br /> 
<a href='#'>About</a><br /> 
<a href='#'>Contact</a> 
</center> 
</div> 
<div id="content"></div> 
</div> 

CSS：

div#container { 
    position: relative; 
    width: 75%; 
    margin: 0 auto; 
} 
body { 
    background-color: #121212 
} 
div#header { 
    background-color: #900; 
    width: 100%; 
    height: 10%; 
    border: 2px solid #488ed0; 
    margin: 0 auto; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 
div#nav { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
    background-color: #900; 
    border: 2px solid #488ed0; 
    width: 24%; 
    height: 900px; 
    float: left; 
    margin-right: 2%; 
} 
div#content { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
    border: 2px solid #488ed0; 
    background-color: #900; 
    width: 74%; 
    height: 900px; 
    float: left; 
} 
a { 
    color: #FFFFFF; 
    text-decoration: none; 
} 
a:hover { 
    color: #000000; 
    text-decoration: underline; 
} 

Fiddle
如何調整使得第二個div沒有得到重疊在第一時調整窗口大小並且所有內容在底部添加滾動的情況下保持固定。

Answer 1

您在期待調整時未定義以下元素的位置。 默認位置值爲靜態這可能會導致調整的麻煩。

製作你的包裝相對應該解決這個問題。

像這樣：

div#header { 
    position:relative; 
} 
div#nav { 
    position:relative; 
} 
div#content { 
    position:relative; 
} 

如果以上不能解決問題，加浮動：左;以上元素連同位置：相對;