Scaling Boxes like Frames

Hello,

I am trying to accomplish with style sheet boxes what I once did with frames.
The design would scale to fit the browser height.

The header and footer boxes would have a set height, but the middle box would
scale to fill the remainder of the height of the browser.

The middle box would contain content (text) from a database and if it went past what
would fit in the height of the box, would then add a scrollbar.  Is there an issue with
the content being text?  In test, I have tried both putting the all three boxes in a
container box and set the height to be 100%, but that did not work.

Here is what I have tried:

  <style>
  div.head
    {
    width: 630px;
    margin: 0em 0 0 0em;
    height: 100px;
    }  
    
  div.main 
    {
    width: 630px;
    margin: 0em 0 0 0em;
    height: 90%;
    }  
   
  div.foot
    {
    width: 630px;
    margin: 0em 0 0 0em;
    height: 50px;
    }  
  </style>

  <body>
    <div class=head> Heading Content </div>
    <div class=main> Database text spanning many rows... </div>
    <div class=foot> Footer Content </div>
  </body>

Any assistance would be greatly appreciated...


Keith

Received on Monday, 28 October 2002 15:32:15 UTC