- 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