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

Answer 1

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.

Answer 2

Could you not set the height of the contained element to be height:100%;

Answer 3

CSS files use the 'padding' function to determine the height and depth of containers. To change the height of the container field simple insert of adjust the padding fields for the specified containers.

The code excerpt below is an example of the CSS used for a container class (you'd find this as in the html file.

.container{padding-top:100px;padding-bottom:50px}header

Answer 4

try adding this to the div to be resized

.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

Answer 5

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 6

If my understanding is correct and the default height of a div where no height is specified is auto then this is not possible without setting an explicit height on the containing div. If an explicit height is set on the containing div then height:100% on the contained div will mean that it grows to the height of the container.