Css height in percent not working [duplicate]

I have the following simple code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>Live Feed</title>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div style="background-color: #eeaabb; width: 250px; height: 100%; border-right: solid 1px #e1e1e1;">
    I should be tall
  </div>
</body>

</html>

But the div doesn't get displayed with height being 100%. Why?

Solution 1:

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>

Solution 2:

Make it 100% of the viewport height:

div {
  height: 100vh;
}

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

Solution 3:

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

Solution 4:

You can achieve that by using positioning.

Try

position: absolute;

to get the 100% height.

Solution 5:

You need to set 100% height on the parent element.