...

View Full Version : Making the Entite Box Fit 100%



amcalab
12-11-2007, 04:36 AM
Anyone figured out a trick for implementing the following:

Elementís Margins + Elementís Height = Containers Height

when (1) the Containers Height is Variable/Unknown (e.g., 100%)
And (2) the margins are fixed (e.g., 10 px)?

As far as I can tell CSS has nothing to say you want the element's entire box (i.e., its own height + margins + padding + border) to fill the container's height unless everything is in percentages.

Am I correct? Can this not be done without JavaScript or hacks in the HTML?

abduraooft
12-11-2007, 07:04 AM
Elementís Margins + Elementís Height = Containers Height
I think this is correct in the normal flow (unless there is some float or absolute position)
Anyway posting your relevant code / link to your page would be useful to say more on this.

Arbitrator
12-11-2007, 09:42 AM
As far as I can tell CSS has nothing to say you want the element's entire box (i.e., its own height + margins + padding + border) to fill the container's height unless everything is in percentages.Short Answer: This is not possible without scripting.

Long Answer: A CSS3 Box Model module draft [1] has box-height and box-sizing properties that could be used for this if youíre able to convert the margins on the child element into padding on the parent (container) element.

I know that Mozilla Firefox and Opera have implementations via -moz-box-sizing and box-sizing, respectively. Youíd have to resort to scripting for browsers not supporting these properties though; you could also use CSS expressions (scripting disguised as CSS) for Internet Explorer.

Note, however, that these properties were removed in the latest draft of the module [2]. Between the current and last iterations, the module changed from the Box Model module into the Basic Box Model module, so the properties could potentially be resurrected in the planned CSS3 Extended Box Model module though (a draft hasnít been released yet).

References

http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-box-width
http://www.w3.org/TR/2007/WD-css3-box-20070809/

amcalab
12-11-2007, 01:30 PM
Thanks. I thought I might have been missing something.

I hope future versions of CSS support simple expressions (e.g., = 100% - 10px).

Arbitrator
12-11-2007, 02:19 PM
I hope future versions of CSS support simple expressions (e.g., = 100% - 10px).CSS3 already has that. I forgot about the CSS3 Values and Units moduleís calc(expression) value [1]. Unfortunately, I donít know of any implementations and the specification is still in W3C Working Draft status.

References

http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum