htmlcsstwitter-bootstrapember.jsember-bootstrap

Issue with ember-bootstrap: page background rendered half gray, should normally be totally white

I have a small issue with Bootstrap. Sometime, my page background is half white/ half gray, but it should be all white.

enter image description here

As you can see, there is some gray background in my application, somebody know how to get rid of it. I'm knew to CSS, so if you need any information about my problem, ask me! Thank you!

EDIT This is the code for my body: 

body {
    background-color: #eee;
    padding-bottom: 35px;
}

I am using a default page-wrapper for the content of every element. He is not defined anywhere.

SOLVED: Thanks to @KieranMcClung, it was solved. You can see in the comment if you want, but basically, I put in my page-wrapper something like: 

<div id="page-wrapper" style="height: auto; min-height: 100vh">
Solution

  • The following example will ensure the .page-wrapper class is always at 100% screen height.

    HTML

    <body>
    <div class="page-wrapper">
        <!-- Page content -->
    </div>
</body>

    CSS

    body {
    background-color: #eee;
}

.page-wrapper {
    background-color: #fff;
    min-height: 100vh; /* Important bit */
}

    It's worth noting that vh can have varied results on certain mobile browsers because the top browser bar disappears when scrolling, meaning the screen height (vh value), changes. You'll have to bear this in mind when testing on those devices.