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

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.