CODEWITHSUNDEEP
htmlbackground-imagecss
Dave
Dave

Reputation: 9157

Why doesn't min-height not work on my page?

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/

Upvotes: 49

Views: 135201

Answers (7)

harris
harris

Reputation: 100

position: absolute; works in most cases. For example:

#body2 { 
    position: absolute;
    min-height: 100%;
}

Upvotes: 2

Masih Jahangiri
Masih Jahangiri

Reputation: 10907

Complete Answer

html, body {
  min-height: 100vh;
}
.wrapper {
  min-height: calc(100vh - <margin-top + margin-bottom>px);
}

Upvotes: 1

Neceros
Neceros

Reputation: 472

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.

Upvotes: 33

Dave
Dave

Reputation: 9157

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>

Upvotes: -9

Michael Copeland
Michael Copeland

Reputation: 849

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.

Upvotes: 4

Naftali
Naftali

Reputation: 146310

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.

Upvotes: -4

wsanville
wsanville

Reputation: 37516

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.

Upvotes: 37

Related Questions