Why is min-height not working?

问题:

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/

回答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.

回答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.

回答3:

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.

回答4:

position: absolute; works in most cases

回答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.

回答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>