JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/6891465/css-position-absolute-overflowscroll-issue

by tw16

HTML

<div id="wrapper">
    <div class="page" id="first">
        <div class="innerContent">
            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>
    <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;
}
.innerContent {
    height: auto;
    position:relative;
}