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

Question

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/

Not really sure but you may find _[this](http://stackoverflow.com/questions/5261939/height-page-div-structure)_ question very helpful. — dialer, Mar 11 '11 at 19:15

score 36 · Answer 1 · answered Mar 11 '11 at 19:08

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.

answered Mar 11 '11 at 19:08

wsanville

37,158
8
76
101

4

Yes, works on the home page, but no on the "media" page, or any page that expands past 100%. – Dave Mar 11 '11 at 19:17
2

Life saver, thank you! I didn't even think to put 100% on the html element!?! – jstafford Apr 03 '12 at 05: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 01 '13 at 02:42

score 31 · Answer 2 · answered Jul 13 '16 at 00:27

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.

answered Jul 13 '16 at 00:27

Neceros

452
4
7

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 02 '19 at 00:12
2

note that 100vh doesn't take into account the scrollbar height if there's one – Emmanuel Meric de Bellefon Jan 11 '20 at 17:26

score 3 · Answer 3 · answered Mar 11 '11 at 19:16

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.

answered Mar 11 '11 at 19:16

Michael Copeland

839
6
12

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 '11 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. – Michael Copeland Mar 11 '11 at 19:52

score 2 · Answer 4 · edited Mar 15 '23 at 17:21

2

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

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

edited Mar 15 '23 at 17:21

nullromo

2,165
2
18
39

answered Sep 11 '13 at 14:20

harris

100
3

score 1 · Answer 5 · answered Oct 01 '21 at 19:41

1

Complete Answer

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

answered Oct 01 '21 at 19:41

Masih Jahangiri

9,489
3
45
51

score -4 · Answer 6 · answered Mar 11 '11 at 19:08

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

answered Mar 11 '11 at 19:08

Naftali

144,921
39
244
303

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 '11 at 19:25
look at @micheal copeland. same reason. that is where the 320px is coming from -- biggest element – Naftali Mar 11 '11 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 '11 at 20:06
well sinse you set min-height to 100% it goes by content – Naftali Mar 11 '11 at 20:08

score -9 · Accepted Answer · edited Aug 30 '12 at 15:49

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

edited Aug 30 '12 at 15:49

Sandro Munda

39,921
24
98
123

answered Mar 11 '11 at 20:25

Dave

8,879
10
33
46

4

That doesn't answer at all the "why" – Maël Nison Mar 07 '14 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 07 '14 at 01:05
Jquery is quite overkill. – Crupeng Jan 30 '21 at 12:54
I've never upvoted an answer for being funny instead of correct or practical until now. Great work! – Michael Sinclair Jan 15 '23 at 17:16

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

7 Answers7

Complete Answer

Linked