45

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/

2
  • Firefox, safari, chrome.
    – Dave
    Mar 11, 2011 at 19:02
  • Not really sure but you may find this question very helpful.
    – dialer
    Mar 11, 2011 at 19:15

7 Answers 7

36

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.

3
  • 4
    Yes, works on the home page, but no on the "media" page, or any page that expands past 100%.
    – Dave
    Mar 11, 2011 at 19:17
  • 2
    Life saver, thank you! I didn't even think to put 100% on the html element!?!
    – jstafford
    Apr 3, 2012 at 5:06
  • 12
    Here's another crazy fact for you, just tested in a minimal case on Chrome 30.0: If you create an empty page with just the above, then add a div using just min-height: 100%, that div will stretch just fine to the height of body. If you then add another div inside that first one, and try min-height: 100%, it will not work. You have to propagate height:100% down through every level that will contain child elements that are expected to stretch to 100% height (this being why the CSS style is applied to both html and body), in this case meaning the div directly under body.
    – Engineer
    Nov 1, 2013 at 2:42
31

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.

2
  • for me too... In my case the parent div had a min-height set as well, so min-height won't work on the child div, unless using 'vh' WEIRD.
    – Bersan
    Aug 2, 2019 at 0:12
  • 2
    note that 100vh doesn't take into account the scrollbar height if there's one Jan 11, 2020 at 17:26
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.

2
  • But I set the HTML and BODY tag min-height to 100%, so that will (and it does, look at the gradient) fill the height of the window.
    – Dave
    Mar 11, 2011 at 19:32
  • I think the affect your trying to achieve will be much easier if you place the background image on the HTML and BODY tag. You won't have to specify any heights in this case. Mar 11, 2011 at 19:52
2

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

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

Complete Answer

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

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.

4
  • 2
    Not true. You can set HTML and body to min-height: 100% to fill the window. So if you set the next element to min-height:100% it should fill the parent element. Also the 320px is coming from the content, not any css. Chrome is showing you the "displayed" height, not the set height.
    – Dave
    Mar 11, 2011 at 19:25
  • look at @micheal copeland. same reason. that is where the 320px is coming from -- biggest element
    – Naftali
    Mar 11, 2011 at 19:51
  • Maybe the better question is: How does the BODY's background fill the window when it's height is 320px. Do we trust the content, or the background?
    – Dave
    Mar 11, 2011 at 20:06
  • well sinse you set min-height to 100% it goes by content
    – Naftali
    Mar 11, 2011 at 20:08
-9

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>
4
  • 4
    That doesn't answer at all the "why" Mar 7, 2014 at 15:18
  • 20
    It's just not nice to use JavaScript. You said Screw it yourself, but this shouldn't be the defacto best way to do it. Don't like that it got a correct answer thingy.
    – Lodewijk
    Jun 7, 2014 at 1:05
  • Jquery is quite overkill.
    – Crupeng
    Jan 30, 2021 at 12:54
  • I've never upvoted an answer for being funny instead of correct or practical until now. Great work! Jan 15 at 17:16

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.