While redesigning one of my pet projects – Simplememos – I came across a very pesky issue on layouts. I wanted a simple header/content/footer layout, with some specific behaviors. Header is part of content, content is using up 100% of whatever area is left after positioning footer fixed at bottom. Sounds easy? Well, what if the content has nothing inside? Yes, all of my content inside was absolutely positioned ‘notes’ that meant content had nothing by which it can auto-size itself! I also needed to have proper visual layout for all screen sizes, handle browser resize, maximize, restore for ALL browsers.
The simple answer, yes I have that layout. Take a look at Simplememos, and feel free to play around in any browser of your choice.
From what I experienced, played around, researched, and figured out eventually was that there is no CSS way of doing this. My own philosophy is to write less, and let CSS handle the details of my layouts as I have specified. But as many seasoned web players know, browsers come with all variations of CSS interpretations, and then you see all those threads on stack overflow around layouts, you’ll definitely have some fix, but then again it won’t work for your specific case if you had like the one I had.
I can’t say stack overflow wasn’t of any help. In fact, I gathered many useful points from across a variety of stack overflow posts, replies, code snippets, and eventually I came up with a version that works for my own needs.
My implementation was quite simple, but is a mix of CSS and JS. I couldn’t avoid JS, unless I go with CSS expressions which in a nutshell is JS to me.
I created 2 regions as below-
<div id="content">... my header, content inside ...</div>
<div id="non-content">... my footer here ...</div>
My div#non-content auto expands to my footer, since footer is a text. However, my div#content has only absolutely positioned divs, so it has no auto-expand criteria as such. Thus, I jig up jQuery’s document.ready event to dynamically resize div#content
$(document).ready(
div#content's height= (browser window's height - div#non-content's height)
)
And I also hook the window’s resize event to do the same dynamic height change again.
$(window).resize(
// Same code to dynamically resize div#content to occupy 100% of remaining available width
div#content's height= (browser window's height - div#non-content's height)
)
There are some additional things I could have done
1. Include a spacer image img#spacer-height that is hidden but dynamically resized to occupy maximum available height, and another image img#spacer-width to occupy maximum available width. I have used this for IE6 and below one time to handle overflow:auto for div#content. Without any content, setting width, and height is OK, but IE6 never bothers to show up any scrollbars.
$('.spacer-width').width= window's width
$('.spacer-height').height= (window's height - div#non-content's height)
2. Use tables! This would have been the best option, but sadly FF does not support overflow:auto’s in table cells. As alternatives I didn’t bother to emded div’s, because I had already got to the point where I am having tables, divs, CSS, and JS to resize the div anyways.
You can see my source in action on my own Simplememos site. If you have pure CSS alternatives, I’ll be more than happy to hear!
Aside from the above, I must say the experience of using Knockout JS, custom KO bindings, jQuery, and extending jQuery selectors was a rewarding experience. I have these, and quite a number of stack overflow posts open for quite a few months now.