Div height not resizing when height is given as %, but will when given as number in firefox

My problem is that I have one div nested inside another large div. The larger div is called content, and the smaller one is content-middle. The content div is the first (and only) element inside the tag, and is properly resizing. The CSS is as follows:

body, html
{
    height:100%;
    margin:0px !important;
    padding:0px;
    background-color:#003A69;
}

#content {
    width:100%;    
    min-height:100%;
    position:relative;
    background-color:#00693E;
    background: url(images/background-green.jpg) repeat;
}

#content-middle{
    background-color: white;
    margin:0px auto;
    width:930px;
    height:auto !important;
    height:100%;
   开发者_开发百科 min-height:100%;
    color:black;
}

The HTML structure is like this: body->content->content-middle

The problem is that in Firefox, the div content-middle does not resize to the size of its container (100%) even if i put in something like 10000%. However, if I were to put a number in for min-height (such as 10000) it resizes properly.

This works properly in Opera, IE doesn't work (not surprising), havn't tried anything else. Is this a bug? Can anyone figure out a workaround?

Thanks in advance!

Change #content to 'height' instead of 'min-height'.