CSS background color height 100% not working

Question

I have a div like so:

<div class="background"></div>

and I am trying to give it 100% height so the background color is the whole div. Here is my CSS:

html, body {
  height: 100%;
}

.background {
  background-color: #1D3862;
  clear: both;
  height: 100%;
}

but its not working...what can I do to fix this ?

What isn't working? It works, but you can put background directly to `body` without need of extra `div`. — pavel, May 20 '15 at 13:32
If there are any more elements, then they may push it down, maybe you have to give it absolute position — Vandervals, May 20 '15 at 13:32
be sure all the parents of `.background`till`body`also have `height:100%` — Alvaro Menéndez, May 20 '15 at 13:36
http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height — Alex Macra, May 20 '15 at 13:41

score 2 · Accepted Answer · answered May 20 '15 at 13:32

2

You need to remove the default margin from the body

html, body {
  height: 100%;
    margin: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}
.background {
  background-color: #1D3862;
  height: 100%;
}

<div class="background"></div>

answered May 20 '15 at 13:32

Paulie_D

1 Answers1