May 03, 2003

CSS: Where art thou? (Height: Auto)

CSS makes our lives easier. It lets me say what point size and color I want my H3 tags to be, and they will be that document wide! It lets the browser request style and content once, and then just content after that. It gives a lot of control over page placement.
But, it has problems. Unwarranted departures from HTML, on a whim perhaps. Today, I worked on this example: In HTML, I can declare a tables height to be 100%. It will be 100% of the height of the page (or whatever contains it). In CSS, I can also declare the height of something to be 100%. The difference? CSS runs up the tree, asking the parent what it's height is. If the parent has no height, that is, height:auto (the default), then the child says "100% of nothing is nothing!".
height:auto does not mean nothing. It means, "I've got content, and it's going to fill me up to some unknown height." The rationale for this is that height:auto determines it's height by asking its children, and you don't want to get into an inifinite loop there.
Why can't we generate that height (that, is the height without including any percentage based children), tell the parent that's it's height, and then have the children who still need heights figure a percentage of that? Certainly, that is how HTML classic did it.
Bugzilla Bug 88641 shows that browsers are doing what the spec wants. It wants you to end up with 100% divs that are 0px. The spec even agrees with them! I am NOT saying that the browsers are doing this wrong.
I am saying the W3C is doing it wrong.

Posted by Stevos at May 3, 2003 06:37 PM | TrackBack

Have you tried setting html and body heights to 100%? It works for me on safari and camino. There are a few issues with margins and padding though.

·May 5, 2003 12:07 PM · comment by Kirsty Henley   -   ∞

As someone who has designed two non-scrolling, window-height sites using CSS, it's good to see that someone else realizes that this aspect of CSS is broken. (The second site was pixel-perfect -- because I'm an idiot -- and contained a scrollable div which was supposed to line up with two different sides of the browser window. It all had to scale to different resolutions, according to the client. If you want to see a grown man cry, ask somebody who's done a site like this about CSS height handling.)

·May 5, 2003 11:20 PM · comment by E. Naeher   -   ∞

FYI, your header image has a border around it (because of the link) in IE6 which screws up your formatting alignment.

Adding border=0 (or CSS equivalent) to the img tag should fix your otherwise very swish looking site.

·May 6, 2003 06:25 AM · comment by Tom   -   ∞

-I am saing the W3C is doing it wrong-

Absolutely right. I have been frustrated by this basic problem ever since I discovered CSS. Until I learned how to read and understand W3C specifications, I thought perhaps I was doing something wrong.

I am glad you have encapsulated the problem so succinctly.

·May 6, 2003 06:28 AM · comment by Simon Jessey   -   ∞

You mean the CSS spec is doing it wrong... ;)

·May 6, 2003 10:12 AM · comment by karl   -   ∞

What about that

100% height (

·May 6, 2003 10:20 AM · comment by karl   -   ∞

·May 6, 2003 10:23 AM · comment by karl   -   ∞

I'd be inclined to agree with you here. I've run into these quirky little problems again and again: no way to set a height or vertically align; absolute positioning only works with hard pixel values (in which case we'd use height:500px rather than height:100%); there's no way to relate two elements so that the top of one is offset from the bottom of another, for example; and I'll maintain that IE5's box model makes far more sense than the official W3-sanctioned one. (not to be a gratuitous link whore, but here's a more detailed look into this issue, and a solution from Peter Paul Koch to use the older box model in newer browsers - )

However quirky CSS is though, I have to conclude we're still better off than using HTML alone to solve these problems. Okay, we can't do everything HTML 4.0 or even 2.0 let us do. But look at how much more we can do that neither of those could. Global style, separation of content and presentation, and reduced download times are huge points in favour of the new.

I'm sure the grass will always be greener on certain issues, but isn't it nice to have more or less solid CSS support and lament a couple of trivial bits of HTML 4, rather than bemoan the lack of support for CSS and being stuck with HTML 4 alone?

·May 6, 2003 10:37 AM · comment by Dave S.   -   ∞

There is no HEIGHT attribute for the TABLE element in any version of HTML.

·May 6, 2003 06:35 PM · comment by Phillip   -   ∞

While that may be true, every user agent in the entire world supports it. Therefore it is defacto within the set of the HTML 'working' spec.

·May 6, 2003 10:57 PM · comment by Steven Canfield   -   ∞

html,body { min-height: 100%; margin: 0; padding: 0; }
body>table { min-height: 100%; }

Shame about MSIE.

·May 7, 2003 06:24 AM · comment by David Dorward   -   ∞

Yep. That is, IMO, the biggest problem with CSS as it stands today. I have to work around this almost every time I start on a new design. Usually reverting back to a a good old HTML solution. It's pretty much inexplicable if you ask me. Obviously a designer didn't get in on that conversation.

·May 7, 2003 03:36 PM · comment by Keith   -   ∞

Actually setting the height of an element to 100% isn't very difficult, though you need to do either of two things:

a) *not* use a doctype
b) set the height of the body and html element to 100%

for more information.

·May 9, 2003 06:54 AM · comment by ppk   -   ∞

(As Kirsty also pointed out)

There is a trick around all of this - at least with Windows based browsers (probably also Mac, but my Mac is at work - I am not...)

In your style sheet you can declare your 'html' to have a height of 100%. This way the body will be 100% of the page height (since html is the parent), and any body element (DIV's etc) will use the full height of your page - if you declare 'height: 100%;'

PS: You need to specify 'margin: 0px;' in your html style if you want to remove the margin that appears in some browsers (like Opera)

like this:

{ margin: 0px; height: 100%; }

{ margin: 0px; height: 100%; }

{ height: 100%; width: [whatever]px; }

PS: You can use perfectly valid code, including XHTML 1.0 strict doctypes

·May 9, 2003 07:13 PM · comment by Thomas Baekdal   -   ∞ explains it's possible what you want.

html,body {
height: 100%;

div#test {
height: 100%;

·May 28, 2003 08:45 AM · comment by Sander   -   ∞
  Post a comment

Remember personal info?