Question

我正在一个网站上工作，它包含三个div（一个标题，下面两个）。现在，当我调整窗口大小时，第二个div 内容会在第一个导航上重叠。
下面是代码的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不会重叠第一个div，并且所有内容保持固定，并在底部添加滚动。

Answer 1

您没有定义下方元素的位置，而期望它可以调整。默认位置值为静态，这可能会导致调整问题。

让你的包装相对可以解决这个问题。

像这样：

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

如果上述方法无法解决问题，请将 float：left; 与位置一起添加到上面的元素：relative;

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

1 个答案: