Jump to content

How Do You A Div To Scroll With A Sticky Header And Footer


AndyMoireASP
 Share

Recommended Posts

HiI am trying to build a web site where the middle part of the screen scrolls, but the header and footer does not. For this, I am using purely div tags and css. I have had some success where I have taken away the IE browser scrollbar, and used overflow-x:scroll on the div tag for my scrollbar content, but when I change resolution, or if div tag for the content height is set to 100%, the bottom edge of the scroll bar disappears behind the footer stopping the scrolling action. Looking around, I have seen solutions where padding is used on the content div tag and the footer. Taking this advice, I applied this solution, but to no effect. So, I am completely stuck!Does anyone have a neat solution for this I could use - I would so grateful!

Link to comment
Share on other sites

If you use position:fixed on the footer and header they'll 'stick' to the page and you can scroll whilst they're static.
Yes, I have managed to get the header and footer to stick, and applied overflow-x:scroll to the content div tag, but what is happening is that the scroll bar is disappearing behind the footer. This means that I can't get to the bottom of the content div to see all of my content, which means I miss some of my controls. I know this is possibly a padding issue, and I have tried to apply padding to both the content and footer div tag, but nothing is working.So, I am really stuck on this one?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...