I’m trying to create a page that has a header and footer that never move, and a content div that scrolls. The content div is transparent, and the header/footer divs have a background-image gradient.
When I apply top, left, and right padding to the content div, that works in Chrome, FF, and IE8. Trying to give the bottom padding seems like FF and IE8 ignore. Chrome does as expected.
It seems to follow the method you were circling. I commented out a lot of unnecessary properties. You can restore them as needed
Works in IE8, FF and Chrome.
There are other methods. Paul posted a clever technique a few months ago, which I can’t seem to find at the moment. Then there’s flexbox starting to break over the horizon. Good potential there.
That’s close to what I’m seeking. I’m trying to set it so that the scrollbar goes the entire height of the browser document window without being cutoff by the header/footer, padding the content area 51px top and bottom so content won’t be hidden by header/footer.
I did it, once, over a year ago. Unfortunately, I no longer have access to that code, and I don’t remember how I did it.
Remember though that when you use fixed elements like this then you cannot have content that wraps or expands the height of the fixed elements because it won’t then match the padding that you set.