It's funny how I suddenly constantly notice the shortcoming of CSS. The specific problem is not being able to specify a relative height or width to 100% of the parent container.
See my challenge. It might not be a bad idea to be able to do simple math in CSS. Simple calculations like add, subtract, multiplication and devision.
It seems to be simply impossible (for me anyways) to set the height of an element to the height of the parent container minus some value.
It gets worse; when you try to compensate by adding a top margin or padding the document moves down, below the reach of the window to a place even scrollbars can't get you to.
I'm not very familiar with the specifications of CSS 2 and 3 but I would like to see some way of setting a height relative to the parent height. I have two solutions, one more elegent then the other.
/* Negative heights should be read like 100%-x. This method does not allow adding to the 100% though. */
{ height : -200px; }
/* A keyword suffixed like !important behind the value, indicating the given value should be relative to the max height of te element (or parent element) */
{ height: 200px 100%; }
{ height: -200px 100%; }
Of course I'd much rather have simple calculating functions like add() sub() div() and mul() and a keyword for 100%.