css - html:侧边栏+高度设置为当前页面大小的滚动div

Question

我有一个侧边栏

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

和主体:

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

我有一个带有侧边栏的页面，主要由一组应保持静态的过滤器和一个太高太宽而无法放入页面的表格组成。我想让表格在它自己的滚动 div 中，这样 div 总是延伸到页面的右侧和底部，并在页面重新调整大小时重新调整大小。到目前为止我有这个:

  <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>

除了表格太高无法容纳当前页面的情况外，这非常有效。然后发生的是 scrolling-div 的底部滚动条不在页面上。页面上有一个主垂直滚动条，如果我一直向下滚动，它会到达 div 的水平滚动条。我想如果 div 永远不会超过页面底部，我就不会有这个问题。

解决此问题的最佳方法是什么？我试过这样做:

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

但是，这只会使 div 拉伸(stretch)以适合整个页面，包括左侧边栏。

Answer 1

您的代码将 div 设置为覆盖整个页面。更改它以反射(reflect)侧边栏的宽度:(从左边算起 200 像素，看起来你想要 20 像素的填充，所以 220。)

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

至于底部滚动条，我建议为您的表格元素设置一个“宽度:”。

table {
    width: 700px;
}