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

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <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;
        background-color:green;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
        background-color:blue;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
        background-color:yellow;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        margin-top:auto;
        right: 0;
        bottom: 0;
        left: 0;
        background-color:red;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> ... header  </DIV>
    <DIV id="sidebar"> ... sidebar </DIV>
    <DIV id="main"> ... main </DIV>
    <DIV id="footer"> ... footer </DIV>
  </BODY>
</HTML>

Received on Monday, 1 November 1999 19:16:45 UTC