Question

我有以下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>

并遵循CSS代码：

html, body { height:100% }
#wrapper {
    height:100%;
    min-height:100%;
    min-width:100%;
    overflow:hidden;
    position:relative;
    width:100%;
}
.page {
    height:100%;
    overflow:scroll;
    position:relative;
    width:100%;
}
.nav {
    position:absolute;
    text-align:center;
    width:100%;
}
.nav.top {
    top:0;
}
.nav.bottom {
    bottom:0;
}
.nav a {
    display:block;
    height:25px;
    line-height:25px;
    margin:0 auto;
    width:160px;
}

正如您所看到的，包装器是“模拟”浏览器窗口的元素，基本上是创建网站的“可滚动”页面。

一切都很完美，但我遇到了一个问题。如果div.page包含更多内容，则滚动条会按预期显示，但.nav div位于浏览器窗口的底部，而不是div#wrapper。

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

Answer 1

首先，您的.nav将与.page相关，而不是#wrapper。为了使.nav与#wrapper相关，您需要将其移出.page div并转移到#wrapper。

但它位于底部，因为您在height:100%和#wrapper上都设置了.page，这意味着您的.nav会显示在底部。

编辑：我想我明白你的意思。如果您将.page容器中的内容换成新的div，例如.innerContent并将其设置为position:relative它应该实现您的目标。实例：http://jsfiddle.net/Rerqm/1/

<强> 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>

<强> CSS：

.innerContent {
    position:relative;
}

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

1 个答案: