CSS height not working if body has min-height

Question

I don't get my first child in the body to 100% height, if the body has min-height specified.

<html>
    <head>
        <style>
            html {
                height:100%;
            }
            body {
                min-height:100%;
            }
            #wrapper {
                height:100%;
                min-width:1120px; /* 250px each side (content width is 870px) */
                max-width:2000px;
                background-image:url(bg.png);
                background-position:50% 25px;
                background-repeat:no-repeat;
                background-size:cover;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- web content -->
        </div>
    </body>
</html>

This does not resize the wrapper to the height of the window. When I remove the min- and use height, it'll work. But I have to have the content height variable...

I did find some other posts here on SO and on google, but they have just questions and no solution.

kapa · Answer 1 · 2013-12-19T12:16:47.107

22

When you use a percentage value for height, it will always be relative to the specified height of the parent element. Not the actual height of the parent element, but the height specified in CSS.

So when your body element has no height specified (only min-height, but that does not count), the 100% will not be able to take effect.

One possible solution is to use position: absolute; top: 0; bottom: 0; on your #wrapper, and your div will be stretched. This of course might have some layout consequences that you do not want.

jsFiddle Demo

edited Dec 19 '13 at 12:16

answered Dec 19 '13 at 12:11

kapa

77,694
21
158
175

1

I already feared that fact :( I'm trying to have my `#wrapper` going to bottom under every circumstances. So if the content is smaller, it has to be 100% of the html, otherwise it has to be as high as the content. And that does not work with `position:absolute`. Sad it seems to be unachievable. But many thanks. Any other ideas are still appreciated ;) – Julian F. Weinert Dec 19 '13 at 12:48
1

I did find a solution... I actually already had that, so I don't remember why I changed it – Julian F. Weinert Dec 19 '13 at 12:59
1

@Julian Well, if you put `overflow: auto` on your absolute positioned wrapper it will certainly *look* fine. I don't know exactly what are the special requirements though. But hm... don't you want `min-height` on your `#wrapper` element instead of `body` if I get it right? – kapa Dec 19 '13 at 13:18
Jep - right. But the body itself was not big enough and somehow it was all screwed up – Julian F. Weinert Dec 20 '13 at 11:25

score 11 · Answer 2 · edited Jun 20 '20 at 09:12

11

Short Answer

Use height:100vh; for divs you want to stretch and fill the screen.

Do not set body's height: 100%; It will break your entire site if you have pages that have more than 100% in content height. They won't be able to scroll.

Long Answer

If you want a few pages of your website to fill the entire screen while still allowing other pages to scroll (because they have more than 100% height in content), you need to set the div height to 100%, not the entire site-wide body height.

Use this as general site-wide css:

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Then set specific divs to fill the entire screen (when they have less than 100% height in content):

/* Set any div heights to 100% of the screen height*/
.div {
    height:100vh;
}

Explanation of the vh measurement: https://stackoverflow.com/a/16837667/4975772

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 27 '15 at 18:06

joshuakcockrell

5,200
2
34
47

2

This saved my day – ErnieKev Feb 24 '17 at 12:10
3

Sorry but ... no On the mobile device the top url bar is not taken into account in the calculation of the viewport (vh) so a scroll appears with this technique – scbj Feb 09 '18 at 10:18
1

@ApynAOM Unfortunately this was an intentional decision by the developers (https://stackoverflow.com/a/37113430/4975772) Trying to give a truly fullscreen experience on mobile requires a lot more effort than just this one css setting. This article looks helpful if that's what you're going for. https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ – joshuakcockrell Feb 09 '18 at 18:43

score 5 · Accepted Answer · answered Dec 19 '13 at 12:59

5

I actually found a solution!

Now I have:

html, body {
    height:100%;
}

So my body is not min-height. I don't remember why I changed it to min-height, but I hope I won't face the issue I obviously faced some time ago...

answered Dec 19 '13 at 12:59

Julian F. Weinert

7,474
7
59
107

4

But you stated in your question that you already knew it works with `height` :). – kapa Dec 19 '13 at 13:16
1

I don't know what happened there, somehow it all got screwed up, but now it works - don't get it :) – Julian F. Weinert Dec 20 '13 at 11:26
2

But in this case, You can't use PageUp/Down and page always scroll up after reload – Dmitry Sep 15 '14 at 04:14
This will break other pages of your website if they have more than 100% height in content. My answer explains how to get the best of both worlds. – joshuakcockrell Mar 19 '17 at 16:42

CSS height not working if body has min-height

3 Answers3

Short Answer

Long Answer

Linked