Consume maximum height available

Question

How can i make a div to consume maximum height available? Like Google Calendar does.

Answer 1

Depending on how you have it setup, you could do the following:

div.your_div {
  height: 100%;
}

Answer 2

Also read 100% Height Layout Using CSS about some browser specific issues and possible solutions - see in the comments there.

Answer 3

Another technique:

#mydiv {
  position: absolute;
  left: 0px; right: 0px; top: 0px; left: 0px;
}

Although IMO, css and HTML just don't work for the modern web application. For something to build on as a foundation, I always recommend jQuery + UI.Layout plugin.

Answer 4

<p style="position:fixed;left:0px;top:0px;width:100%;height:100%;background:red">asdfadsf</p>