Autofit a div inside another

Question

I have a header and a content div inside a container div. I want the header's height to be fixed and the content div to occupy the rest of the container div. The easy solution is to set the height of the content div as (container-header) pixels. Is there an alternate way of doing it ?

div.container { height: 300px; width: 100%;}
div.container h2 { height: 15px }
div.container div.content { height: ?? }

Answer 1

In the first place, you don't need to set the div.container's width to 100%. You get that for free.

Second, if you have a fixed height for the container, it's simple arithmetic to subtract the header (15px) from the container (300px). Simple is good.

If your container's height is not fixed, you can try absolute or relative positioning to nail the bottom of the content div to the bottom of the parent (e.g., bottom: 0px). But you apparently have no need of that here.

Answer 2

I do not believe you can do this with simple CSS. However, it is trivial to implement when using a CSS preprocessor like LESS or Sass. Both less and sass have support for variables, so you can do something like this:

@total-height: 300px;
@h2-height: 15px;

div.container { height: @total-height; width: 100%;}
div.container h2 { height: @h2-height}
div.container div.content { height: @total-height - @h2 }

Note: I have not compiled / tested this code. But you get the idea.