how to size a div's height to its container height, using CSS?

Question

How to size a div's height to its container height, using CSS ?

<div class='container'><br>
  &nbsp;&nbsp;<div style='display: block; height: 500px'>left</div><br>
  &nbsp;&nbsp;<div id='to-be-sized' >right</div><br>
</div>

Answer 1

You can either:

• use the incomplete but philosophically correct path of pure CSS and face every kind of incompatibility between browsers

or

• write 3 lines of dirty semantically incorrect and devil made table and have it work perfectly everywhere

Your pick :)

Answer 2

There's a way to do this IF you happen to be using jQuery. As you asked for CSS this might not be an option available to you, but if you can utilise it it will do exactly what you want.

$(divToResize).css('height',$(container).innerHeight());

$(divToResize) is the selector for the DIV you wish to match the height of it's container and $(container) is logically the container whose height you want to get.

This will work regardless of if the container's height is specified in CSS or not.