Css height in percent not working

You can achieve that by using positioning.

Try

position: absolute;

to get the 100% height.

height: 100% works if you give a fixed size to the parent element.

You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.

html, body { height: 100%; width: 100%; margin: 0; }
div { height: 100%; width: 100%; background: #F52887; }

<html><body><div></div></body></html>

Make it 100% of the viewport height:

div {
  height: 100vh;
}

Works in all modern browsers and IE>=9, see here for more info.

Related