Layout Manager for Scrolling DIV’s

Layout Manager for Scrolling DIV’s

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:


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; = (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.

Share the Post:
data observability

Data Observability Explained

Data is the lifeblood of any successful business, as it is the driving force behind critical decision-making, insight generation, and strategic development. However, due to its intricate nature, ensuring the

Heading photo, Metadata.

What is Metadata?

What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved