To create a non scrolling region (without using frames) on a page, you can do it in one of two ways. The first way requires that you do a little trick with some javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>Non-Scrolling Region Example</title>
      <script language="javascript">
         function Setup()
         {
            window.onresize=ResizeScrolling;
            ResizeScrolling();
         }
         
         function ResizeScrolling()
         {
            scrolling.style.height = document.body.offsetHeight 
            - nonscrolling.offsetHeight - 4
         }
      </script>
   </head>
   <body scroll="no" onload="Setup()" style="margin:0">
      <div id="nonscrolling" style="background-color:silver">
         This is the non-scrolling region<br>
         This part won't scroll
      </div>
      <div id="scrolling" style="overflow=auto">
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
         This is the scrolling region<br>
      </div>
   </body>
</html>

The second technique, suggested by Rich Igou, instead uses a table to force the sizing of the div tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>Non-Scrolling Region Example</title>
   </head>
   <!—Authored by: Rich Igou - Rapattoni Corporation-- >
   <body scroll="no" style="margin:0">
      <table height="100%" width="100%" cellpadding="0" cellspacing="0">
         <tr>
            <td height="40" style="background-color:silver">
               This is the non-scrolling region<br>
               This part won't scroll
            </td>
         </tr>
         <tr>
            <td>
               <div style="height:100%;width:100%;overflow:auto;">
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
                  This is the scrolling region<br>
               </div>
            </td>
         </tr>
      </table>
   </body>
</html>

To see an example of these, check out nonscrolling1.html and nonscrolling2.html. Size your browser window smaller than the text in the non-scrolling region to see the effect.

Top