I have been trying to use the min-height:100% to get my content area to stretch to fill the remaining % of the screen, but I'm just plain stumped. Any help is appreciated.
I have 3 fixed height divs at the top of the screen and 1 fixed height footer. I then have another div where the non-fixed height portion lies, which is the "container" div. Within here I have both content and sidebar divs that I want to stretch out to 100% of screen at minimum, and expand to fit the content.
http://jsfiddle.net/P3Ckk/110/
Any and all help is appreciated. It's got me stuck.
You have #conatinerWide set with a gray background and I'm assuming you want it to stretch to fill the rest of the are.
The thing is html and body will only expand large enough to fit the content you have. So setting those to 100% will tell it to fill the document window; allow your #containerWide to now be 100% available space.
Adding html, body { height: 100%; } should achieve what you are wanting
http://jsfiddle.net/rtgibbons/P3Ckk/111/
Update for comments;
You for every element you want a min-height:100% to be the size of the window you need to set the height:100% to the parent element. So #containerWide needs height:100% and #container needs min-height:100%; height:100%;. Now the fun part. If you do this same pattern for #exsi and #cont the will be the height of #container and not adjust for the space needed by #foot.
Here is where I'd continue at
http://jsfiddle.net/rtgibbons/P3Ckk/113/
Basically, I've set min-height:100%; height:100% on all the parents elements. I've moved #foot out of #container so it will be maxed out with the columns. Then I applied some negative margin-bottom of the Total Height of #foot so it will be sucked up inside #containerWide
Two caveats.
#exsi and #cont to expand past #containerWide so removing them and applying them to the inner elements as needed or yet another wrapper.#containerWide; I'll leave this as an exercise for you to figure out.