I’ve created a site for a client that has a footer that always goes to the bottom of the page, and a content area in the middle with a fixed-height div with a slightly smaller fixed-height div inside with its overflow set to auto - your basic iframe effect without the iframe. The idea was to keep the content “above the fold” and always have the footer as at the very page bottom. My problem is that setting the “iframe” divs to a fixed height ruins everything. Ideally, the content would expand or contract according to the size of the window and always end somewhere in the middle of the footer bar. However if the fixed height of the content div exceeds the amount of room showing in the window, it then goes past the footer bar and continues down until it’s finished. And if the window is much longer than the content div, then it ends way before the footer and just kind of hangs out there with a ton of room below it until the footer happens.
I’ve tried using percentages to determine both content divs heights and it doesn’t seem to have any effect. That’s really what I’d like, i imagine: to have the content always be a certain percentage of the available window.
If it looks okay on your browser (and I still haven’t fixed all the cross-browser problems yet, as I’m still determining the basic coding setup - at present it’s looking great on Firefox 4.0 and 5.0 for Windows) try changing your screen resolution down till you see what I mean.
Yeah, that link gave me an idea I might used (a fixed footer), but I don’t want the content to go below the fold ever - I want overflow in the content area to revert to a scrollbar, and then (and this may be a pipe dream) the content area itself to adjust its height depending on the height of of the window. And then scroll if the content is longer than the newly-adjusted-for-the-height-of-the-window div area.
Let me see if this adds some clarity, in case the above isn’t enough: if the viewer’s window has room for, let’s say, 400 pixels worth of content area, I want the footer to head to the bottom and stay there (which it seems to do now) and the content div to adjust itself to, say, 350 px in height, so that it always ends a little before the bottom of the page. Then on someone else’s screen that has room for 700px of content area, I want the content div to adjust itself to 650px so it ends at the same place as on the 400px screen. Is that clearer?
Not exactly sure from your post, but it sounds like you want a “sticky footer”, which isn’t easy to do. But resident guru Paul O’Biren has a method here that works well:
There is also a tute for a 100% high page, but I don’t think that’;s want you are looking for.
In most cases, height: 100% doesn’t work, except on the outermost container, and that page will explain why, so it’s worth a read.
If you resize the page narrower then the scrollbar on the content disappears outside the viewport and then the poor user has to scroll horizontally first before they can then vertically scroll the content.
Removing the windows vertical scrollbar is always a dangerous thing to do as it breaks usual practices and may confuse the user.
I’m not sure why you just didn’t use the window’s scrollbar to scroll your content and let it go below the fold as per normal. You can still have your fixed footer image etc. Perhaps you could do something like this and let the text fade out if you don’t want it to hit the bottom.
Okay, I found a solution, and it was in fact CSS-based. Reading this article at A List Apart, it turns out more than one side of a div can be absolutely positioned, not just the top and left. Adding “bottom: 10%” gave me exactly what I was looking for. Woo hoo!
ralph.m, maybe you should move this back to the CSS forum?
