additions...

...web design...

The 100% tall web page…

NOTE: this article isn't complete yet.

Some request for those 100% tall web pages from time to time – for whatever reason. Of course, such a request only makes some sense if web pages have no or very little content to begin with, and are expected to end up on tall browser-windows on equally tall screens.

The following is a “proof of concept” article, as “100% tall” web pages is not something I will promote for use on “real-world web sites”.

By “100% tall” we mean: “as tall as the browser-window” or “at least as tall as the browser-window”. Some even want it to mean: “as tall as the browser-window, but never taller”, so I have included such a variant just to show how that turns out.

Some want web pages that are slightly shorter than the browser-window - or at least appear that way, so I have included a couple of such variants too.

the basics…

First: this should be easy, so what are the problems.

Problem 1: we never know the size of the browser-window.
Solution: the browser-window is always 100% of its own height and width, so we can start at declaring 100% height on the root-element (html) and calculate from that.

Problem 2: browsers can only calculate height in percentage based on height given to its direct parent.
Solution: we must keep height-control from the root-element to the page-container, with no intermediate elements without given height in between.

Problem 3: if the browser-window is shorter than the page, then 100% becomes a limitation.
Solution: the page-container must not be given a height, but rather a min-height so it can grow beyond the browser-window.
This means the base for further height-calculations is lost, so elements further in won't work with percentage-height.

Following are the basic building-blocks for such a construction.

(X)HTML source-code
<html>
<head>
</head>
<body>
<div id="container">
— the page's content here —
<div>
<body>
<html>
CSS
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
}
* html #container {
height: 100%;
}

Note: the '* html' hack is there to fix IE6 (and older), since they don't understand 'min-height'. No provision for IE/Mac.

simple solutions work – at least in part…

The above works because it is kept extremely simple, and it will keep on working in equally simple layouts/designs. My 100% tall - basic demo page is a good example.

Trying to make something like the above work for complex layouts with heavy container-nesting, is going to be a pretty daunting task trying to keep the height-chain unbroken without height-limitations and failures in some browsers. I would not even try.

100% tall variants…

Since all variant are based on “full browser-window height calculations”, they go under the same title.

  1. The 100% tall - basic variant has proven to be treated most stable and predictable across browser-land – probably because of its simplicity. So if you're looking for a reliable solution, this is probably it.
  2. The dysfunctional 100% tall but never taller is an interesting case for cross-browser testing, but it is also a showcase for how it should not be done.
    I do find the way browsers handle my Jumping Cat Acid Test under certain conditions quite entertaining though. Needless to say that those browsers are different.
  3. The dysfunctional 100% tall with CSS table is pure CSS 2.1 standard, but purity doesn't help much since browsers either doesn't understand it or can't agree on how to render it.
    • IE7 (and older) doesn't understand CSS table, so our attempts are doomed to fail in that bugger.
      IE6 is given a solution based on one of its many bugs – similar to one in the basic version, but this doesn't work in IE7. An IE-expression that'll let us transfer window-height onto the relevant containers, might be a solution for all IE/win versions.
      Illustration: line-up in IE6.
    • Opera 9adds a bottom-space below the window – reachable by scrolling. Not nice but the line-up is otherwise fine. Need to investigate this behavior.
      Illustration: failure in Opera 9.
    • Gecko also has its own interpretation of what table-elements can hold – not much, so I think I'll call Firefox a bugger too.
      Illustrations: failure in Firefox 2 and failure in Netscape 8.
    I'll keep this CSS table variant for future use, in case those buggers get more in line with CSS 2.1 and my intentions – one day.
  4. The 96% tall with margins variant is semi-dysfunctional since the additions of margins into the equation is always problematic. However, it serves its purpose to illustrate some of the problems, and I can think of cases where it will work just fine.
  5. Making it appear as if there are margins above and below the page, is a lot easier that to have actual margins there. So, the 100% tall minus margins variant can come handy in some cases.

Many ways to create new variants by changing and adding to the basics, but I think the above will do.

it doesn't work as expected…

You should not be too surprised if you see glitches in some browsers. Browsers are generally not very good at calculating element-height this way, and they may cut calculations short with some strange and unpredictable results under certain conditions. I don't think the browser-developers have prepared those poor browsers for this – just check the Jumping Cat Acid Test notes and screen-shots.

It is also pretty easy for the unexperiences web designer to get the math wrong as design-elements are added. Mixing units (%,px,em, ex etc.) that affect size of vital elements, is a typical example. It may end up being calculated perfectly by the browsers, but look like a complete failure from a design-point of view.

NO, you can not add borders, paddings and margins into the equation and expect it to work flawlessly. It may work just fine if you stick to percentage-values all the way and do your the math, but it probably won't end up as expected under stress.

finally…

I have simple reasons for not using this – or any other – “100% tall” solution in any of my real-world designs.

  1. I usually have enough content to overflow the height of the browser-window anyway, so “100% tall” would not make the slightest difference.
  2. I can't see a good reason for filling the browser-window with an empty page. If the page is too short, then it is too short no matter what.

So here we are. I got no real need for “100% tall” web pages, but if you do then be my guest and borrow a suitable variant, or create your own from the basics.
After all: the basics are pretty basic.

sincerely  georg; sign

Hageland 22.mar.2007
last rev: 23.mar.2007


additions...

If the page is too short, then it is too short no matter what.— Georg

demo pages:
tests:

Conclusion so far (guess what): browsers are different.Francky

external resources:


about…
…2005 - 2007