0

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">
maje
  • 424
  • 3
  • 17
  • 1
    Is it possible to provide some code, either by attaching to the question (ideally) or adding a link to codepen/jsfiddle? It's nigh on impossible to figure out the issue without the code. My assumption is that the content element (white) falls short of the screen height so the body colour shows beneath it. – Kieran McClung Sep 07 '17 at 08:12
  • I have to resize my browser to standardize the page in white, maybe that can help? – maje Sep 07 '17 at 08:39
  • @KieranMcClung I have to manually set the page-wrapper min-height to 1000px to correct it, but since I am trying to avoid using pixel, maybe there is an other solution? – maje Sep 07 '17 at 09:09
  • 1
    Setting `min-height: 100vh` will ensure the `.page-wrapper` class is always 100% height of the window. – Kieran McClung Sep 07 '17 at 09:12
  • OK that fixed it, thanks a lot – maje Sep 07 '17 at 09:14
  • 1
    Not a problem, glad I could help. I've added it as an answer with a bit more information. – Kieran McClung Sep 07 '17 at 09:33
  • Why not just change the background color to #FFF on your body tag instead of trying to stretch a sub element? – BrandonW Sep 07 '17 at 13:28
  • I have a side-menu on the left, and it render better with the bottom of this side menu in gray. For commercial reason too, the colors of the society are orange and gray ;) – maje Sep 07 '17 at 13:35

1 Answers1

1

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.

Kieran McClung
  • 714
  • 1
  • 7
  • 16