W3C home > Mailing lists > Public > www-style@w3.org > November 1999

Re: Uselessness of fixed positioning due to inadequacy of height:, and the fix

From: Pierre Saslawsky <pierre@netscape.com>
Date: Mon, 01 Nov 1999 16:16:51 -0800
Message-ID: <381E2D69.3439AFBF@netscape.com>
To: Matthew Brealey <thelawnet@yahoo.com>
CC: www-style <www-style@w3.org>

Matthew Brealey wrote:
> The CSS spec gives an example for fixed positioning:
>  [snip]
> How is anyone expected to use fixed positioning when
> you have to specify the height of the initial
> containing block.
> This deficiency makes fixed positioning entirely
> unusable for this kind of design.
> However, the simple addition of the keyword 'viewport'
> to height solves all the problems. Thus height: viewport.

The sample code is wrong:
- You don't need to specify the height of the initial containing block
because fixed positioned elements are children of the viewport (see
http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details). It
would have been a different issue if the elements were absolutely positioned.
- The footer element cannot work as described because the values are
over-constrained and 'bottom' is ignored. You should add 'margin-top:auto'.

A fixed copy of the sample code is below, with background colors.

Pierre Saslawsky <pierre@netscape.com>
French Style

    <TITLE>A frame document with CSS2</TITLE>
    <STYLE type="text/css">
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
    <DIV id="header"> ... header  </DIV>
    <DIV id="sidebar"> ... sidebar </DIV>
    <DIV id="main"> ... main </DIV>
    <DIV id="footer"> ... footer </DIV>
Received on Monday, 1 November 1999 19:16:45 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:26:52 UTC