Getting overflow-y:scroll to work with fixed positioning html & css
- by Vagabond_King
I have a Jquery tools scrollable thats set to be fixed to the bottom of the browser window. Ideally i would just like to get a overflow-y:scroll; working for the page as a whole when the browser is < 700px. (so no content gets hidden, as its all fixed place). This feels like it should be simple but its causing me huge headaches. js solutions are fine at this point.
Thanks in advance.
<body>
<div id="background">
<div id="fix_to_floor">
<div class="scrollable">
<div class="frame">
<div class="page" id="page1">
<div class="inner_page">
<h2>About Us</h2>
<p>content</p>
<div class="floor_items">
<img src="images/chair_n_hole.png" width="950" height="700" alt="Chair N Hole">
</div>
</div>
</div>
<div class="page" id="page2">
<div class="inner_page">
<h2>page 2</h2>
<p>content</p>
<div class="floor_items">
<img src="images/spachairs.png" width="950" height="700" alt="Spachairs">
</div>
</div>
</div>
<div class="page" id="page3">
<div class="inner_page">
<span class="copy">
<h2>Products</h2>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
body {
width: 100%;
bottom:0px;
position: fixed;
}
div#background{
height:948px;
width:100%;
background: #DDD url('../images/working_bg.jpg') repeat-x fixed bottom center;
bottom:0px;
overflow: scroll;
}
div#fix_to_floor{
position: fixed;
margin: 0 auto;
bottom:0px;
height: 700px;
width: 1700px;
}
.content img{
position: absolute;
bottom: 0;
}
#content div.floor_items{
position: absolute;
bottom:0;
width:1700px;
width: 950px;
height: 700px;
}
/* **** specific page backgrounds */
/* page 3 - Products */
#page3 .inner_page{
background: url('../images/display.png') no-repeat scroll bottom center;
z-index: 50;
}
#page3 .copy{
float: left;
margin: 100px 300px;
}
#page1 div.floor_items img{
margin: 0 0 0 0px;
}
/********* SCROLLABLE *********/
div.scrollable{
bottom: 0;
position: relative;
/* required*/
overflow:hidden;
width:1700px;
height: 700px;
left:0px;
}
/* needs to be huge and fixed. holds the content */
div.scrollable div.frame{
width: 20000em;
position: absolute;
height: 700px;
}
/* single item , must bve floated for horiz. scrolling*/
div.frame div.page{
float:left;
width: 1700px;
height: 700px;
margin: 0;
}
div.page div.inner_page{
width:950px;
height:700px;
margin: 0 370px;
/* border: 1px solid red;*/
}
