How to allow vertical scroll in absolute layout?

Question

I'm working on this website right now http://antoniobrandao.com/v4

All objects are placed in absolute positions. Unfortunately this doesn't enable vertical scrolling.

I've read that using position:static in a parent element (in my case, the DIV sections-wrapper ) would do the trick, and yes a scrollbar appears, but the contents seem visually destroyed when I attempt to scroll after setting position: fixed to my sections-wrapper DIV .

I'm new to HTML5 so if anyone could give me a hint I would be most thankful!

thanks

Answer 1

I found out the answer to my own question.

The solution was to manually (via JavaScript) set the height of my "sections-wrapper" and "background" to match the height of the contents of the sections within the "sections-wrapper".

This is because the "sections-wrapper" doesn't know automagically how tall is the stuff within itself, so we must tell it ourselves. The downside is that we must always be updating this values when the contents change height within the wrapper. Not too bad.

so if the stuff within my wrapper is eg. 1200px:

$('.background').css('height', '1200px');
$('#sections-wrapper').css('height', '1200px');