proper css to ensure that the body element fills the entire screen

Question

I have a problem with my body element. It seems that it is filling 100% percent of the screen. However, if you drag the browser small and then scroll down - the body doesn't extend.

Please see this jsFiddle as a prime example.

Noah Wetjen · Answer 1 · 2015-06-16T20:08:35.853

6

height: 100%; is the height of the window your site is displayed in not the height of the website, which causes the background getting purple when srolling down.

Just add this:

html { background: green; }

And remove the

body { background: green; }

to get the background to always be green. (JSFiddle)

edited Jun 16 '15 at 20:08

answered Aug 15 '12 at 03:50

Noah Wetjen

1,695
2
17
30

1

I was wondering if that was what the 100% referred to. Your solution fixes the color... but what about how the actual content is coming out of the body element... that is really what the problem is... it doesn't seem right. I put a clear-fix on it... I mean, Why is the body that wraps my entire site - not able to hold it all. I was mainly using the colors just to illustrate that. – sheriffderek Aug 15 '12 at 15:53
a lot of blogs say html, body {height:100%} and then main-container{min-height:100%} but that is also not working... maybe there is no answer... but I am just trying to figure this out once and for all. This question has been asked on here at least 5o times. I have never seen an answer unlike the one below. (which doesn't work) – sheriffderek Aug 15 '12 at 15:56

sheriffderek · Accepted Answer · 2021-01-07T18:13:02.127

I believe that THIS FIDDLE answers the question. I have been using this in production and it has been working great.

HTML:

<html>
    <body>
        <div class="main-wrapper contain">
                         
            <section class="main-content">                    
                Main Content
            </section> <!-- end .main-wrapper -->
        
            <div class="other-thing">
                Other thing for example.
            </div>
                     
        </div> <!-- .main-wrapper -->
    </body>
</html>

CSS:

/* hard reset */
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    position: relative;
    padding: 0; margin: 0;
} 

/* micro clear fix (clears floats) */
    .contain:before,
    .contain:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.contain:after {
    clear: both;
}
.contain {
    *zoom: 1;
}

html {
    height: 100%; /* 01 */
    /* tells html to go ahead and feel free to be 100% height */
}

body {
    min-height: 100%; /* 02 */
    /* expands to push html to the limit */
}

.main-wrapper {
    /* overflow: hidden; */
    /* in this case - forces wrapper to contain content (like a clear-fix) */
    /* use clear fix instead */

}

/* if you see yellow - we are failing */

.main-content {
    width: 100%;
    float: left;
}

.other-thing {
    width: 100%;
    float: left;
}

I've tested this - and it seems to work in every situation, assuming that you keep all of your containers and stuff actually containing properly. There must be downfalls to this overflow: hidden; or people wouldn't use clear-fix. So - I would love hear more input.

Alternatively, I think that the html and body can be 100% and then the .main-wrapper can be min-height: 100%; and that works as well. Basically - something needs to force all of its containers to stretch. and in order to do that, all of those containers must be set to 100% so that they remember that they have that ability. Or am I anthropomorphizing the divs too much...

UPDATE 2021: The nature of the web is to allow the content to define the 'shape' or the 'space' or whatever you want to call it... so - the body doesn't really know how 'tall' it is. It knows it's 100% width, because it's a block level element. So, unless you tell the HTML to be height: 100%, and then every child... then they wouldn't really know what "100%" really meant. 100% of what? For dashboard apps and desktop full-screen layouts you may want to set the hight (but not in most cases) - and using 100vh units is available now. General rule: just let the content decide the size of it's parent element and work with the nature of The Web. (ignore all that code up there! It's 2021: flex-box + grid! : )

I'm actually using the micro clear-fix instead of the overflow hidden now, because it cuts off things like box-shadow. — sheriffderek, Mar 31 '13 at 07:51
2021! updated: no need for any clear-fix type stuff now. : ) — sheriffderek, Jan 07 '21 at 18:13

Noah Wetjen · Answer 3 · 2012-08-20T16:51:07.490

0

Just remove the height: 100%; from your <body> and and also remove the height: 300px; from your <figure> and you are ready to go.

You can also use this code: http://jsfiddle.net/Asustaba/LBu8z/8/

edited Aug 20 '12 at 16:51

answered Aug 15 '12 at 20:46

Noah Wetjen

1,695
2
17
30

from my understanding, there is not really a difference between adding height:auto and just leaving out height all together - – sheriffderek Aug 20 '12 at 01:30
Thats right, but you didn't do that you set the figure tag to have a height of 300px (take a look at your JSFiddle in your Question) – Noah Wetjen Aug 20 '12 at 01:43
http://jsfiddle.net/sheriffderek/LBu8z/9/ i see what you mean. but that doesn't really have to do with the problem. see this fiddle... now the text is about 300px high. and height is auto - and it's the same problem. – sheriffderek Aug 20 '12 at 01:59
i edited my post again, now it's working, woulld be nice if you could mark my answer as right :) – Noah Wetjen Aug 20 '12 at 03:50
1

I am still not convinced that answer is what I am looking for. Maybe I have been inarticulate. height:auto seems to be unnecessary. see this new fiddle http://jsfiddle.net/sheriffderek/CPVnu/ --- the html is set to 100% and the body to min-height 100% --- my goal is not to patch my problem - but to once and for all decide what I will use to code with from now on. a good example is when you bring in an overlay - like a light box -and then the background goes black - but if you scroll - then the background is only 100% height of the actual browser window and then you scroll and !@#* – sheriffderek Aug 20 '12 at 17:11
I don't see your problem in your JSFiddle :) – Noah Wetjen Aug 20 '12 at 19:16
well - that what i'm showing you. there doesn't seem to be one in this case - and height:auto doesn't seem to really have anything to do with it. I'm trying to put together a few more case studies. – sheriffderek Aug 20 '12 at 19:22
No, it doesn't have something to do with `height: auto;` because this is a default style, that means, you don't have to write it except you want to override an inherit style. Just get rid of all the height codes, they aren't needed usually. In most cases you only need height, if you want to set a "fixed" height to an Object. – Noah Wetjen Aug 20 '12 at 21:28

Viktor Tabori · Answer 4 · 2017-03-29T20:07:19.997

0

1) If you want to have the body fill the whole screen, while solving 2 things simultaneously (due to the body having dynamic content)

not enough content: the body is at least as tall as the viewport, since your body doesn't have enough content to fill the screen
too much content: the body should be as tall as the html

Now you can use min-height:100vh for that, which means 100% of the viewport's height: http://jsfiddle.net/LBu8z/89/

Except the Opera Mini it is supported by all browsers: caniuse.com/#search=vh

2) if you want to have a fixed background image, then I suggest to stretch a fixed position body:after

I needed this solution in production since a background-sizing:cover won't work properly with a fixed backround, thus I had to make the body:after fixed and the background image not fixed. You can check it here: https://www.doklist.com/

body:after{
  content:"";
  background:green;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-1;
}

3) If you want to do it with only the body, then: stretch a fixed body with overflow scroll. But be aware it may interfere with some elements (eg. bootstrap tooltips and popovers)

body {
    background: green;
    overflow-y:scroll;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

edited Mar 29 '17 at 20:07

answered Mar 25 '17 at 08:31

Viktor Tabori

2,087
1
13
14

That may create the 'look' of it, but the body isn't actually doing it. – sheriffderek Mar 25 '17 at 16:58
What is your reasoning behind the fixed positioning on the body? http://jsfiddle.net/sheriffderek/ph6d4xcd/ – sheriffderek Mar 28 '17 at 16:15
You want 2 things: 1) your body is **at least** the height of the view-port, 2) if the content is larger than the view-port, then your body's height is the same as the html's. What you have linked doesn't fulfill the first objective: http://jsfiddle.net/ph6d4xcd/1/ If you use fixed, it means it is fixed in the viewport all the time, and when you stretch it with setting the top, bottom, left, right to 0 you make sure it is always fills the whole viewport. – Viktor Tabori Mar 29 '17 at 19:52
I see what you are saying, but the goal is to change how the HTML document flow works - as little as possible. Scrolljacking it and throwing fixed on the entire thing is pretty heavy. - also, I write this 5 years ago. – sheriffderek Mar 29 '17 at 23:53
BTW, on another note, I tested opera mini for flex-box - and it seemed to work. – sheriffderek Mar 29 '17 at 23:54

proper css to ensure that the body element fills the entire screen

4 Answers4

Linked