Question

I have following HTML code:

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

and following CSS code:

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;
}

As you may see, wrapper is the element that “simulates” browser window, basically the idea is to create “scrollable” pages of the website.

Everything works perfectly, but I’m facing one problem. If div.page has more content, scroll bar appear as expected, but the .nav div is positioned at the bottom of the browser window, not the div#wrapper.

Does anybody know how to fix this issue?

Answer 1

First of all your .nav is going to be relative to the .page and not the #wrapper. In order for .nav to be relative to #wrapper, you will need to move it out of the .page div and into #wrapper.

However it is at the bottom because you have set a height:100% on both #wrapper and .page, which means your .nav would appear at the bottom.

EDIT : I think I understand what you want. If you wrap the contents in the .page container a new div e.g. .innerContent and set that to position:relative it should achieve what you are trying to do. Live example: 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;
}