Coder Perfect

[duplicate] Css height in percent isn’t working.


I have the following straightforward code:

The div, however, does not appear when the height is set to 100%. Why?

Asked by strangeQuirks

Solution #1

All of your parent elements, in this example your body and html, must be set to 100% height. This violin demonstrates how it works.

Answered by Jan Dragsbaek

Solution #2

Make it the full height of the viewport:

div {
  height: 100vh;

For additional information, click here. Works in all modern browsers and Internet Explorer >=9.

Answered by mb21

Solution #3

If you give the parent element a fixed size, height: 100% will work.

Answered by GG.

Solution #4

This can be accomplished through the use of placement.


position: absolute;

to achieve a height of one hundred percent

Answered by Muthu

Solution #5

The parent element’s height must be set to 100 percent.

Answered by rahul

Post is based on