Html CSS位置绝对/溢出：滚动问题

我有以下HTML代码：

<div id="wrapper">
    <div class="page" id="first">
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>

        <div class="nav bottom"><a href="#second">Second</a></div>
    </div>
    <div class="page" id="second">
    </div>
    <div class="page" id="third">
    </div>
</div>

如您所见，包装器是“模拟”浏览器窗口的元素，其基本思想是创建网站的“可滚动”页面

一切都很完美，但我面临一个问题。如果

div.page

包含更多内容，则滚动条会按预期显示，但

.nav

div

位于浏览器窗口的底部，而不是

div#wrapper

---

有人知道如何解决这个问题吗？

首先，您的

.nav

是相对于

.page

而不是

#wrapper

的。为了使

.nav

与

#wrapper

相对，您需要将其移出

.page

div

并移到

#wrapper

中

但是它位于底部，因为您在

#wrapper

和

.page

上都设置了

高度：100%

，这意味着您的

.nav

将显示在底部

编辑：我想我知道你想要什么。如果您将内容包装在

.page

容器中，则应创建一个新的

div

，例如

.innerContent

，并将其设置为

位置：relative

，它应能实现您的目标。实例：

HTML:

<div class="page" id="first">
    <div class="innerContent">
        Test<br/>
        Test<br/>
        <div class="nav bottom"><a href="#second">Second</a></div>
    </div>
</div>

.innerContent {
    position:relative;
}

---

您尚未发布完整的html。

.nav

在哪里？@tw16右侧，正在修复。编辑已修复：-）主要问题是我希望所有内容都保持在同一页上。还有一个问题，为什么我要添加额外的div？这解决了我的问题。page div已经有

位置：relative

？如果可能，请解释；-）

.innerContent {
    position:relative;
}