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

Answer 1

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

HTML:

    
        

                         
            
                    
                Main Content
            
 
        
            

                Other thing for example.
            
                     
        
 
    

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! : )