I’ve read lots on here and elsewhere about the many ways to attack 100% height - and now I’m really confused! My page is arranged like this:
I need the page to have a fixed width - easy enough - I’ve set a width on Outer and have margins set to Auto.
I also need the page to be resizeable vertically:
Title - fixed height at the top
Footer - fixed height at the bottom
Content - varying in height depending on the height of the window/viewport
The rationale for this is to allow Content to expand to use all the available vertical screen space. There will be further elements within Content and I’ll use overflow:auto to make it fit.
This is how I’ve tried to attack it:
100% height on HTML and BODY
100% height on Outer
Relative on Outer (just to set a base for positioning)
Absolute on footer, sticking it to bottom:0 and left:0
That has got me part of the way, looking at what’s going on with IE’s developer tools, it seems that Outer is sitting at 100% of the viewport.
But, Content doesn’t seem to be contrained by the viewport at all - if I put a border on it, I can never see the bottom. I’ve tried a margin-bottom to bring it clear of the footer, but still with no luck.
So, in short, I guess there are two questions:
how do I get a DIV to size itself to exactly fill the available vertical space
Is there another way to get where I need to go?
I’d welcome any thoughts because I am completely confused by everything I’ve read so far.
Needs to work in IE8 / IE7 / IE6 and FF - that’s all.
Before I suggest anything I must ask you what you expect to happen to content in the middle section when the viewport height is made smaller or when you have content that exceeds the height available?
You have a fixed height of 100% so where is that content to go and how are you to access it?
There won;t be a scrollbar on the main window and the only solution is for scrollbars to appear on your middle section. That immediately creates accessibility problems as everyone expects the scrollbar to be on the main window. Then there is the added problem in that when you narrow the viewport you lose the right scrollbar because the window obscures it so now to navigate the page you have to first horizontally scroll to reveal the vertical scrollbar.
All in all it’s a bad technique all around
Here is an example that does just that and you can see how awkward it is.
Guys, thanks for the advice - quick and comprehensive as usual!
Paul, your example does exactly what my client is looking for. Maybe if I explain a bit more about what’s going on, it wont seem such a bad idea. If it still does, then maybe I need to convince him…
My graphic is probably a bit misleading - the title is only around 60 pixels high and the footer around 20 pixels - the content is bigger than it looks.
The system is for deployment to a closed user group and we can assume a minimum resolution of 1024 x 768.
There will generally be two areas within Content - a set of “search” fields at the top and a set of results at the bottom. The div containing the search fields will have a constant height. The div containing the results should fill the remaining space within Content and should use overflow:auto to provide a scroll bar if it doesn’t all fit. This is the key point: the client wants to make sure that best use is made of available vertical space - if the user has more than 768px available, he can lengthen the screen and see more results without scrolling.
I agree. However in this “business application” the visual cues around what is scrollable are quite logical. We also need to keep the “search” fields visible so the user can see what the results represent.
I think that’s covered by the assumption of 1024x768 minimum.
So, I think I’m off now to extrapolate your example - to add the extra complexity of needing something to scroll within Content, rather than scrolling Content itself…
Thanks again for the pointers! Any other thoughts more than welcome!
I’ve taken Paul’s example and tried to move it to where I need to be. My attempt can be seen here.
It seems that I have two problems:
I’ve stuffed something up and caused the footer to move away from the bottom of the viewport.
I’m not seeing a scrollbar where I need to, which is on the grey area full of “Bottom part”.
I think the lack of a scroll bar is because I’ve used overflow:hidden on the containing div, but I’m not sure.
So, as a reminder, I’m trying to get the “grey bit” to expand to fill the available vertical space - and it’s doing that; but I need a scroll bar to appear when there’s not enough room for all the content.
Another shove in the right direction would be appreciated.
Understand that - and the way the application is designed means that it’s only the grey part which will ever overflow. The app runs in a separate browser window, so we don’t have to worry about Toolbars etc taking up space. Obviously the user might reduce the height of the window, but if they go below 768 then that’s their issue, as we have a clearly stated minimum size.
I’ll need to have a look and see what happens in IE6, as some users are definitely still living in that era. So long as it remains usable, I should be ok.
I agree but, hopefully, the users (unless they do something silly with the window) will only ever see one.
Again, thanks for the help - not sure how the world of CSS would function without people like you!!