Content scrolling on mobile page with fixed header/footer

Question

Hello i am building a mobile webpage where my content only will be scrolling and my footer and header is position:fixed - Can i make the content so that it doesn\'t scroll u

Answer 1

Here you are:

http://jsfiddle.net/VNVqs/3/

I just removed the position: absolute to the scrolling part (wrapper and scroll-content), and added some padding to the wrapper in order to let the first and last item not being under header and footer.

Basically, the trick is done by using position: fixed only on header and footer, and let the rest of the page to scroll as a normal page, without using overflow: auto on a specific fixed-height element. Doing this way, the only problem is that the first lines of your content will be always under the fixed-positioned header (and last ones under the footer), but you can fix this by applying some padding on the content wrapper, as much as header (and footer) height. You got it?