Getting overflow-y:scroll to work with fixed positioning html & css
Posted
by Vagabond_King
on Stack Overflow
See other posts from Stack Overflow
or by Vagabond_King
Published on 2010-06-14T05:43:33Z
Indexed on
2010/06/14
5:52 UTC
Read the original article
Hit count: 549
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;*/
}
© Stack Overflow or respective owner
