Previous Message
Next Message

Re: [css-d] DIV background problem

Sent by Andrew Clover on 31 January 2002 10:10

Randal Rust [EMAIL-REMOVED]> wrote:

> body { height: 100%; }

> This works in IE6 and Opera 6, but Netscape 6 ignores the height.  I don't
> know why, but would like to (hint, hint).

Because Mozilla doesn't consider the <html> element to have an explicitly
set height. In CSS you can only set an element's height as a percentage of
its parent when that parent has a 'height' property.*


 1. give the element that you want to be 100% high 'position: absolute'.
    This makes the percentage units relative to containing block (which
    except in the case of nested positioning will be the viewport)
 2. give <html> an explicit height of '100%'. CSS is unclear as to what
    that 100% could be relative to, as <html> has no parent, but in
    Mozilla it uses the viewport. I find this behaviour a bit odd as
    the <html> element is normally supposed to *be* the viewport.

either of these will make the element as high as the viewport.

* - For this reason, it is hopeless to try to make a left-column element
    which is the same size as the page content. Column effects like this
    are best done using aligned background images instead. Or another
    approach is to make the left column as large as the window, and then
    fix it in place, either using 'position: fixed' or making the right-
    hand content scroll with 'overflow: auto'.

Andrew Clover
Previous Message
Next Message

Message thread:

Possibly related: