[ranty bit] I hate CSS. No matter how many times people explain to me how it's actually awesome, I hate it. And it hates me.

I do very little web coding but every time I do some small, little thing there's CSS, cock-blocking me again. [/ranty bit]

I want a design that fills the whole page, vertically, even when the content doesn't.

I've spent the morning (well, morning for me) doing some Googlin', and it's just really discouraging. The "answers" are full of javascript hacks and kludges, arguments about the continued viability of tables, caveats about older browsers, and so forth.

Some of the solutions I've tried just flat don't work.

Is this really that hard? For God's sake, why?

TIA

XOXOXO

Let's say something like this, where the main content is divided into two vertical columns, each of which extend vertically to the bottom of the page.

You shuold be able to create a container that has height 100% - I'll see if I can find some old code.

Edit - I have a 3 column... it has headers and footers - but you can scrap those - the content always fits 100% - PM me an addy and I'll shoot you the file to look at.

Fake it with repeating bg that is very wide but only a couple of pixels tall.

I used this one on www.greynotgrey.com

body {
    margin: 0px;
    padding: 0px;
    background: #fff url(../images/2000bg2.gif) repeat-y 50%;
    color: #4F535E;
    font: 11px, verdana, arial, helvetica, sans-serif;
    line-height: 12px;
}

I used min-height: 100% on my main div with border. works in all major browsers

min-height should do it. Can you post your html? it'll be a lot easier to troubleshoot.

I can't get min-height to do nuttin' no matter how many DIVs I put it in.

Here's an example: http://markclarkson.com/Temp/NewSite/test2.html

CSS is here: http://markclarkson.com/Temp/NewSite/2Col.css

The two content containers are #leftbar and #ritebar.

rd sent me a file that I'm trying to make sense of...

add height 100% to the html element, the body element, and the container div and it will work.

html { height: 100%; }
body { height: 100%; }
#container { height: 100%; }

The html and body get treated just like any other element, and every element can only fill it's parent. So if they aren't filling 100% neither can anything inside them.

oh, and no need to use min-height on #leftbar and #rightbar. You can just use height. You will probably want to use min-height though in place of some of the heights if the page could be longer than the window.

hooray! That actually works. Thank you, Sir!

Yup, no problem. Stuff like that is kind of confusing sometimes, but that's just the C part of CSS. It makes it worse though since the default width is 100% and the height is not, it kind of hides the fact that the html and body elements play into the equation in most situations.

huzzah!