Question

I have a sticky footer which works, but I’m using a tiled background image and an inner #content div. The problem I have is that the #content won’t expand to fill the height of the container. I’ve got a demo at http://jsfiddle.net/mpRUT/1/, where I’ve changed the colours to illustrate. The only thing keeping #content from collapsing into oblivion when the page is empty is the min-height set on it.

Can I get it to expand to fill the container, or do I just have to set a larger min-height and lose some browsers?

The effect can be seen at http://myfitzeek.lime49.com/

Answer 1

IMO: Will not work 100% without min-height. (see comments)

My old answer:

Edited sample (as fork):
http://jsfiddle.net/4EtKh/1/

#wrapper: {
    /*min-height:100%;*/ /* remove! */
    position:relative;
    height:100%; /* new! */
    overflow: hidden; /* new! */
}

#content {
    text-align: left;
    line-height: 140%;
    background: #fff;
    font-size: 1.2em;
    /*min-height: 80px;*/ /* remove! */
    height: 100%; /* new! */
}