CSS Position absolute/overflow:scroll issue

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?

You haven't posted the full html. Where is .nav?

tw16
– tw16

2011-07-31 18:34:57 +00:00
Commented Jul 31, 2011 at 18:34 — tw16
– tw16, Commented Jul 31, 2011 at 18:34
@tw16 Right, fixing right now. edit Fixed :-)

users1184848
– users1184848

2011-07-31 18:36:28 +00:00
Commented Jul 31, 2011 at 18:36 — users1184848
– users1184848, Commented Jul 31, 2011 at 18:36

tw16 · Accepted Answer · 2011-07-31 19:01:28Z

3

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

edited Jul 31, 2011 at 19:01

answered Jul 31, 2011 at 18:38

tw16

29.7k7 gold badges65 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

users1184848 Over a year ago

The main issue is that I want to keep everything on the same page.

users1184848 Over a year ago

One more question, why should I add extra div - which solves my issue - when .page div already has position:relative? Please explain if possible ;-)

Collectives™ on Stack Overflow

CSS Position absolute/overflow:scroll issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related