发表新帖
发表新帖

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

后端 未结
关注
4 1884
孤城傲影
孤城傲影 2021-01-27 04:10

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

相关标签:
4条回答
  • 失恋的感觉
    2021-01-27 04:53

    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)

    0 讨论(0)
  • 孤城傲影
    2021-01-27 05:01

    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;
}
    0 讨论(0)
  • 一个人的身影
    2021-01-27 05:04

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

    0 讨论(0)
  • 忘了有多久
    2021-01-27 05:04

    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/

    0 讨论(0)
 看不清?
提交回复
热议问题