Home/ Questions/Q 6113033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:48:45+00:00

I have an HTML Document that looks a bit like this, only is far

  • 0

I have an HTML Document that looks a bit like this, only is far more complex and harder to control:

<body>
  <div id="title">This div does not do anything, just stays at the top.</div>
  <div id="container">
    <div id="navigation">Some navigation</div>
    <div id="content">Most of the content</div>
  </div>
</body>

Then I have a stylesheet that includes the following:

#container
{  
   height: auto !important;
   overflow: visible !important;
   overflow-x: auto;
   overflow-y: scroll;
   position: relative;
   width: auto !important;
}

This all works absolutely perfectly. The title section stays at the top of the page, the container div becomes scrollable if the content is long enough to need to scroll, otherwise it doesn’t.

The problem is, that I am then using Javascript to add a whole lot more stuff to the content div. This means that the content div is getting longer than the page after it has loaded and this seems to mean, in IE8 at least, that the scrollbars on the container never get activated, so once the Javascript added content falls off the bottom of the page it becomes inaccessible.

It doesn’t help that the minute I start tinkering with the IE developer tools, the scrollbars vanish altogether and I can’t make them reappear, so it becomes somewhat hard to test.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The solution that has worked was a simple hackaround of resizing the element with JavaScript to match the size it actually is once I have added the extra data to it, like this:

    document.all['container'].style.height = document.documentElement.clientHeight+"px";

    Of course, this doesn’t entirely circumvent the problem- for that we need a new function:

    function resizeResults()
{
    var resultPanel=document.all["container"];
    var topPanel=document.all["title"];
    var newHeight= document.documentElement.clientHeight;
    newHeight -= topPanel.clientHeight;
    resultPanel.style.height=newHeight;
}

    Then we can use window.attachEvent("onresize", resizeResults); to ensure that we don’t lose the scrollbar or have it otherwise messed around when the user changes the window size.

    • 0