Question

I have a sidebar

#sidebar {
    float: left;
    position: relative;
    width: 200px;
    padding: 20px;
}

and a main body:

#main {
    margin: 0 20px 0 260px;
}

I have a page which has the sidebar, and the main consists of a set of filters that should stay static, and a table that is both too tall and too wide to fit in the page. I would like to have the table in its own scrolling div, such that the div always extends to the right and bottom of the page and re-sizes if the page re-sizes. So far I have this:

  <div id="sidebar">
    <div class="boxed" id="menu">
      <h2 class="title">Main Links</h2>
      <div class="content">
        <ul>
          <li><a href="/">Main page</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div>
    <div id="main">  
      <h2>Header</h2>
      <div class="filters">
        Filters go here
      </div>
      <div style="overflow: auto;">         
        <table><!-- very large table --></table>
      </div>
    </div>
  </div>

This works perfectly, except for the case when the table is too tall to fit in the current page. What happens then is that the scrolling-div’s bottom scroll bar is not on the page. There is a main vertical scrollbar on the page, which, if I scroll all the way down, reaches the div’s horizontal scroll bar. I figure if the div never grows past the bottom of the page, I won’t have this problem.

What’s the best way to solve this issue? I tried doing this:

<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:0;">  

However, this just made the div stretch to fit the entire page, including the left sidebar.

Answer 1

Your code sets the div to cover the entire page. Change it to reflect the width of your sidebar: (200px from the left and it looks like you want a 20px padding, so 220.)

<div style="overflow: auto; position: absolute; top:0;right:0;bottom:0;left:220px;">  

As for the bottom scrollbar, I suggest setting a “width:” for your table element.

table {
    width: 700px;
}