Javascript: Dynamically setting width and height properties for scrollbars of fluid pages

It is usually pretty straight-forward to set a div to handle horizontal and vertical scrolling for fixed-width elements.

You will just need to set the following CSS properties for your div:

• width
• height
• overflow

You may also just use the overflow-x property to display the horizontal scrollbars or clip just the left/right edges of the content inside the div element.

You may also just use the overflow-y property to display the vertical scrollbars or clip the top/bottom edges of the content inside the div element.

Here's the link for values that you may use for these overflow properties.

But how do you handle a fluid page that adjusts to screen sizes and the width of the div is not fixed?

I've googled this use case and found some discussions with people looking to treat this with a purely CSS approach but I believe its not possible.

The solution is simple. Use javascript.

For my use case, I may have several dynamic-width divs in a single page that need to automatically display the scrollbars when the content overflows the div's content area.

For my page markup, I assign a common class to these divs like below.

<div class="codeBox" style="background-color: #eeeeee; font-family: courier; font-size:.9em; white-space: nowrap; overflow: auto; padding: 10px;">

</div>

The important properties to set in the div's style attribute are the overflow and nowrap properties.

 I wrote a javascript code to get the width and height of the dynamically rendered div using the div element's clientWidth and clientHeight properties.

I then assigned these values to the div's width and height  properties to complete the markup and the properties required for the scrollbars to function.

Here's the javascript code:

<script type="text/javascript">
  window.onload=function() {
    var codeBoxes = document.getElementsByClassName("codeBox");
    for (i=0; i < codeBoxes.length; i++) {
      var codeBox = codeBoxes[i];
      //subtract 10 or some amount to compensate for the vertical scrollbar space
      var width = codeBox.clientWidth - 25;
      var widthAttr = width + "px";
      codeBox.style.width = widthAttr;
      var height = codeBox.clientHeight;
      if (height > 500) {
        var heightAttr = 500 + "px";
        codeBox.style.height = heightAttr;
      }
      //set the font-family of the <span> tags within this div the same as the div's (codeBox) font-family attribute
      var fontFamily = codeBox.style.fontFamily;
      var spans = codeBox.getElementsByTagName("SPAN");
      for (j=0; j < spans.length; j++) {
        spans[j].style.fontFamily = fontFamily;
      }
    }
  }
</script>

As you can see on the code, I'm activating the vertical scrollbar if the div's height goes higher than 500 pixels. The code is also setting the fontFamily property to all SPAN elements inside this div.

Here's the link that describes the clientWidth and clientHeight properties of the HTML DOM Element  object.

That's it. All you need is to set the div's style attribute with the overflow and nowrap properties. Then add the javascipt code to the page.