调整窗口大小会导致第二个 div 与第一个 div 重叠

Question

我正在开发一个站点，其中包含三个 div（一个标题和两个下面）。现在，当我调整窗口大小时，第二个 div content 与第一个 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

您没有定义下面元素的位置，而期望它会调整。 默认的 position 值为 static，这可能会导致调整出现问题。

让你的包装器relative应该可以解决这个问题。

像这样：

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

如果上面没有解决问题，将 float:left; 与 position:relative;

一起添加到上面的元素中