Re: Percentage height meaurements.

Richard York wrote:

>
> Hello,
> 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!
>
> Regards,
> Richard York
>
IIRC calc is not offiicial yet, though is an idea people have been 
floating around..

The solution to your problem, which IS NOT a final spec though (so not 
sure how good it would be to put in a book) is the css-property:  
'box-sizing'  in the CSS3 Box Model spec [1].

After looking, it appears there is erratta about that, make sure to read.

~Justin Wood

[1]  http://www.w3.org/TR/2002/WD-css3-box-20021024/

Received on Thursday, 27 May 2004 17:17:39 UTC