1

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.

0

4 Answers 4

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)

2
  • 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. Commented Aug 15, 2012 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) Commented Aug 15, 2012 at 15:56
1

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

2
  • I'm actually using the micro clear-fix instead of the overflow hidden now, because it cuts off things like box-shadow. Commented Mar 31, 2013 at 7:51
  • 2021! updated: no need for any clear-fix type stuff now. : ) Commented Jan 7, 2021 at 18:13
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/

8
  • from my understanding, there is not really a difference between adding height:auto and just leaving out height all together - Commented Aug 20, 2012 at 1: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) Commented Aug 20, 2012 at 1:43
  • 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. Commented Aug 20, 2012 at 1:59
  • i edited my post again, now it's working, woulld be nice if you could mark my answer as right :) Commented Aug 20, 2012 at 3: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 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 !@#* Commented Aug 20, 2012 at 17:11
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)

  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;
}
5
  • That may create the 'look' of it, but the body isn't actually doing it. Commented Mar 25, 2017 at 16:58
  • What is your reasoning behind the fixed positioning on the body? jsfiddle.net/sheriffderek/ph6d4xcd Commented Mar 28, 2017 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: 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. Commented Mar 29, 2017 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. Commented Mar 29, 2017 at 23:53
  • BTW, on another note, I tested opera mini for flex-box - and it seemed to work. Commented Mar 29, 2017 at 23:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.