Getting overflow-y:scroll to work with fixed positioning html & css

Question

I have a Jquery tools scrollable thats set to be fixed to the bottom of the browser window.

All I want to happen is for the page to be able to scroll vertically when the browser is less then 700px high. (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.

http://www.vagabondbrigade.com/staging/berns/

Answer 1

If you are referring to the content that is being cut off at the top of the page, I would recommend putting top and bottom margins on your css page to the proper elements to harness their positioning.

You could do a fixed height or width for the main structure of the page and then the other elements that you want positioned, position them accordingly.

example:

/* html */

<div id="main_structure">
  <div id="content">
      blah blah blah
  </div>
</div>

/* css */

#main_structure {width:100%; height:700px; margin:20px 20px 20px 20px; padding:20px;}
#content {width:200px; height:200px; padding:10px; margin:20px;}

Answer 2

Playing with Firebux on your page (the link that you've provided), I've added at div.floor_items a property overflow:auto; and the problem was fixed ;)

The content was bigger that my test screen resolution, and the content wasn't all visible, but with that change, the scroll bar appeared and allow me to scroll and view the "off screen" content!

This is your solution, if that was your problem!