Why is min-height not working?

Question

So here's the scoop.

I have a gradient applied to the background of the body element. Then I have a container (right after body) that has a background .png image applied to it. The gradient always expands to at least 100% window height but the container (#body2) does not.

Any suggestions to why this doesn't work? You can inspect the HTML on my web page here: http://www.savedeth.com/parlours/

Answer 1

Specify height: 100% on the html, body and #body2 elements (line 1358).

html, body, #body2
{
    height: 100%;
    min-height: 100%;
}

Not tested in IE 6, works in 7 though.

Answer 2

Using vh instead of % worked for me without having to use any extra tricks.

This is what I have:

html, body, .wrapper {
    min-height: 100vh;
}

Where .wrapper is the class you apply to your container/wrapper or main body of content that you wish to stretch the full length of the screen height.

This will work as you would expect it to when the content within the wrapper is less or more than the screen height allows.

This should work in most browsers.

Answer 3

position: absolute; works in most cases

Answer 4

You have your min-height set to 100% which will only be as tall as any elements that fill the space. Express you min-height in terms of pixels. Also, note that IE6- requires it's own set of rules. See http://davidwalsh.name/cross-browser-css-min-height for more details.

Answer 5

something is setting the height of your body element to 320px (if you look in chrome's inspect element)

therefore 100% is of 320px. that is why is it only showing on the top of the page with 100% of 320 px height.

you have to set a height for the min-height to work.

so set the height @ 100% in general should work.

Answer 6

Screw it. Who doesn't have javascript anyways? Especially for this demographic.

<script type="text/javascript">
$(document).ready(function(){
if($("body").height() < $(window).height()){
    $("body").height($(window).height());
}
});
</script>