Inside Technique : Autosizing Frames
By Scott Isaacs

This builds upon the Hiding and Showing Frameset tip to demonstrate how you can automatically size a frame to its contents. This is important frames are usually specified in pixels and can vary greatly from user to user. This example works by resizing the dimensions of the frameset when the page is finished loading.

Below demonstrates this with a CSS help area we are working on (please ignore the close button - this area is intended to be viewed in its own window). You may have noticed the top frame adjust slightly when the page finished loading. This ensures that the entire top frame, which is not resizable, is displayed.

Description

In the CSS Help page, three frames defined as follows.

  <FRAMESET border=0 name=fs ROWS="30,*" ONLOAD="fixSize()">
    <FRAME SRC="header.htm" NAME="header">
    <FRAMESET COLS="145,*" ID=info>
      <FRAME SRC="index.htm" NAME="index">
      <FRAME SRC="" NAME="content">
    </FRAMESET>
  </FRAMESET>

The fixSize() function is called when the frameset and all the contained frames are finished loading to either enlarge or shrink the header frame. You must wait until the onload event to ensure that the contents have been fully downloaded and accounted for.

  function fixSize() {
      // The body represents the outer-most frameset for frameset documents.
      document.body.rows = window.frames.header.document.body.scrollHeight + ", *"
      // Walk into the header frame and get the scrollHeight - 
      // this represents the height of the contents in pixels. 
  }

Code

  function fixSize() {
      // The body represents the outer-most frameset for frameset documents.
      document.body.rows = window.frames.header.document.body.scrollHeight + ", *"
      // Walk into the header frame and get the scrollHeight  
      // this represents the height of the contents in pixels. 
  }

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.