Home » Tip Bank » Enterprise » Interoperability

Language: Web
Expertise: Intermediate

Aug 25, 2000

A scrolling DIV is a great way to display a large amount of data without resorting to frames. Setting the CSS-2 OVERFLOW property to auto will make the DIV into an independently scrolling container when either the HEIGHT or WIDTH property also is specified:

 <DIV id=divScroller style="overflow:auto;
height:200px">
      <!-- stuff goes here -->
   </DIV>

This is great, but how do you know what to set the height to? Here is a simple layout manager function to handle that:

 function resizeVerticalDiv(oDiv, 
oBottomNeighbor) {
      var iMinHeight = 100;    //DIV won't get 
smaller than this
      var iClientHeight = document.body.clientHeight;
         //the browser's viewable area

      // find the absolute top coordinate
      var iAbsoluteYTop = oDiv.offsetTop;
      var oParent = oDiv.offsetParent;
      while (oParent.tagName.toUpperCase()
!= "BODY") {
         iAbsoluteYTop += oParent.offsetTop;
         oParent = oParent.offsetParent;
      }

      // find the absolute bottom coordinate
      var iAbsoluteYBottom;
      if (oBottomNeighbor != null) {
         var iNeighborTop = oBottomNeighbor.offsetTop;
         oParent = oBottomNeighbor.offsetParent;
         while (oParent.tagName.toUpperCase()
!= "BODY") {
            iNeighborTop += oParent.offsetTop;
            oParent = oParent.offsetParent;
         }
         iAbsoluteYBottom = document.body.scrollHeight 
- iNeighborTop
      } else {
         iAbsoluteYBottom = 0
      }

      var iNewHeight = document.body.clientHeight - 
iAbsoluteYTop -
         iAbsoluteYBottom;
      oDiv.style.posHeight = (iNewHeight >= 
iMinHeight ? iNewHeight :
         iMinHeight);
   }

Just call this from window_onload() and window_onresize() and pass your scrolling DIV as the first argument. If there is stuff on the page below your DIV, pass the ID of the first object below the DIV in the second argument.

The function finds the desired top and bottom coordinates to determine the height for the DIV that will make everything fit perfectly on the page without resorting to absolute positioning. This can be modified for a horizontally scrolling DIV very easily; just use lefts instead of tops, rights instead of bottoms, and widths instead of heights.

This function won't work in Netscape, but neither does the "overflow:" attribute (part of the CSS-2 standard), so that's OK.