- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Thu, 27 May 2004 19:44:56 -0700
- To: "Richard York" <richy@smilingsouls.net>, <www-style@w3.org>
Hi, Richard,
I guess that %% units to be implemented will solve your problem.
If you will write
div {
padding: 10px;
margin: 10px;
height: 100%%;
border: 1px solid black;
}
You will get exactly what you want.
100%% is 100% from "free space". Here "free space" is a container inner
height minus borders margins and paddings of the div.
================================================================
And to other "boxing" gentlemen: you did not read specs :).
Box-sizing *is not* a solution for given task. No one box-sizing value will
allow author to set *outer* box dimensions (which include margins)
Andrew Fedoniouk.
http://terrainformatica.com
>
> 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
>
> --
> :::::::::::::::::::::::::::::::::::::::::
> The Spicy Peanut Project
> http://www.spicypeanut.net
> :::::::::::::::::::::::::::::::::::::::::
>
>
>
Received on Thursday, 27 May 2004 22:45:46 UTC