1

Fiddle - http://jsfiddle.net/6axdexfj/

Once in a great while I come across a problem, and when I do I search to find a solution when I can't seem to figure it out myself.

So I'm building a web design app, and thoughout today I been reconstructing it so no garbage css is added in.

Today I added some simple styling to an element and I noticed that if I don't have position: absolute; or fixed on a standalone div that it's height is not changed when encoded with percent's.

.box1 {
  width: 100%;
  height: 50%;
  background-color: rgb(0, 244, 85);
}

I noticed this years ago and still to this day I don't know why it does that. I always avoid it by applying the following to my body.

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Can somebody explain why this is?

user2864740
  • 60,010
  • 15
  • 145
  • 220
Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144

1 Answers1

4

Add this to your css and it should work

CSS

html, body {
    height: 100%;
}

The problem is that your body and html container does not have the full height by default, thus your div by default will not have full height. To avoid this in the future, use reset.css to make your life easy :)

LINK TO reset.css

mcn
  • 711
  • 4
  • 9