CODEWITHSUNDEEP
htmlcss
sheriffderek
sheriffderek

Reputation: 9043

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

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.

Upvotes: 1

Views: 7969

Answers (4)

sheriffderek
sheriffderek

Reputation: 9043

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

Upvotes: 1

Viktor Tabori
Viktor Tabori

Reputation: 2207

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

  1. 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
  2. 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;
}

Upvotes: 0

Noah Wetjen
Noah Wetjen

Reputation: 1785

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)

Upvotes: 6

Noah Wetjen
Noah Wetjen

Reputation: 1785

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/

Upvotes: 0

Related Questions