Percentage height meaurements.

I am currently writing a Beginning CSS book for Wiley. I've hit a snag
in explaining percentage height measurements.

I have an example looking somthing like this:

html, body {
     height: 100%;
     margin: 0;

div {
     padding: 10px;
     margin: 10px;
     height: 100%;
     border: 1px solid black;

Obviously this results in the <div> element spanning vertically larger
than the available window area, since padding, margins and borders are
added in addition to the 100% measurement.

My question is, are there any solutions available or in the proposal
stage that would allow a designer to utilize the 100% measurement minus
the length of margins, padding and borders. I've done quite a bit of
digging in the specifications and have come up naught so far.

I've seen proposals for the %% unit and I've also seen calc() floating
around. Where the solution would be:

     height: calc(100% - 42px);

Though I haven't yet found a reference to calc() in the specifications.
Not sure if that's just theoretical at this point or something really
being added to CSS.

Any insight would be greatly appreciated!

Richard York

The Spicy Peanut Project

Received on Thursday, 27 May 2004 16:41:44 UTC