- From: Mikko Rantalainen <mira@st.jyu.fi>
- Date: Wed, 13 Aug 2003 13:54:49 +0300
- To: www-style@w3.org
Jens Meiert wrote: [>Ian Hickson wrote:] >>...what height is the <a> element? > > Ian -- Should be rendered as 100%, assigning the second <b /> element a 25% > height (100% related to maximum space available, or using the entire screen > height). But wouldn't it be more useful to bring in this example: > > <a> > <b1> 1 </b1> > <b2> 2 </b2> > <b3> 3 </b3> > </a> > > * { display: block; } > a { height: 500px; } > b1 { height: 75%; } > b2, b3 { height: auto; } > > ...and thus clarifying the only legal way to mix relative with absolute > values? <b1 /> would obviously be 375px high, while allowing <b2 /> and <b3 /> to > share its space. And what good can the auto do in case we have absolute values in mix? If <a> has absolute height I can easily type in other heights as absolute too and the auto value does very little after all. I think, a better way for achieving the result this proposed auto value would be used for (if I've understood it correctly) would be to come up with a new dynamic unit. Idea 1: ------- ce: containing element This unit can be used for any length and it's defined as containing element's height or width (as appropriate). If the containing element has the respective height or width set to 'auto', then the size is taken from it's parent. If the root element has 'auto', the value for ce will be width or height of the viewport. For example: <a> <b>1</b> <b>2</b> </a> * { display: block; } b { height: 1ce; } Each of the b elements would be rendered with the height equal to one viewport. However, this doesn't make sense, because height of <a> is now 2 viewports so both <b> should have height of 2 viewports and <a> is now 4 viewports... ...infinite recursion, anyone? Idea 2: ------- vpw: viewport width vph: viewport height According to my experience, when some authors look for exotic ways to define size of some element, it really comes to trying to define size of that element relative to viewport size. Nowadays, one has to use percentages and carefully compute size of every element from root to the element one wants to set size for. This is logical addition to 'rem' unit (root's em). The only additional unit we need is something equivalent to HTML's '*'. If I have <a> <b>1</b> <b>2</b> <b>3</b> ... <b>n</b> </a> <x>x</x> * { display: block; } a { height: 0.8wph; } b { height: 1auto; } x { height: 0.2wph; } here the 'auto' unit (obviously we want a better name) should mean that I want that every one of those b elements has equivalent height. I really don't know beforehand how many elements I'll have so I cannot use percentages. If I wanted to make the first b element to be exactly twice as high as the rest of the b elements I'd simply add a > b::first-child { height: 2auto; } and the height of a element would be distributed to n+1 parts and the first b element would get 2 parts. I'm aware that such an unit could be computationally expensive, but I cannot think of any better way to have multiple elements sized proportional to parent element if the number of child elements is unknown by the time the stylesheet is written. -- Mikko
Received on Wednesday, 13 August 2003 06:54:54 UTC