-1

Why does height: 100%; break the layout on one page, but seem required on another in Bootstrap?

CSS:

body { height: 100%; }

--

Not Broken (background spans full page):

http://emailscout.io

--

Broken (background stops before end of page):

http://emailscout.io/results/?domain=example.com

HTML: https://gist.github.com/anonymous/60cdd52499aa6808bf14

okoboko
  • 4,332
  • 8
  • 40
  • 67

2 Answers2

1

The height responds to the size of the viewport. In both Cases the background is as high as the viewport.

As you can only scroll in the second example you are only noticing it in number 2.

To Provide you with a proper and clean solution:

min-height does not work with body

Quote from https://stackoverflow.com/users/406543/moses

"First, declare a doctype so you're in standards if you haven't already.

Now, the body can only be as high as the containing html, so you need to set HTML tag to 100% height and body to min-height 100%. This works for me on Firefox."

Community
  • 1
  • 1
jungerislaender
  • 304
  • 1
  • 12
  • By removing the `height: 100%;`, though, it breaks the layout on http://emailscout.io (the background does not extend to the bottom of the full page as expected). Is there a way to fix both? – okoboko May 11 '15 at 15:28
0

If you want a proper scaled background like that create a new div at the top of your page with the background css you want and give it height:100%;width:100%;position:fixed;top:0px;left:0px;