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 under the header or footer , so that it just scrolls in it’s own div.

The reason why i want to do this is that i am going to have some opacity on my header and footer and if the content gets scrolled under , it’s just not looking good.

Heres a jsfiddle i made to just show you the example of the scroll

http://jsfiddle.net/VNVqs/

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?