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>

这种方法非常有效，除非桌子太高而无法放入当前页面。然后会发生什么是scroll-div的底部滚动条不在页面上。页面上有一个主垂直滚动条，如果我一直向下滚动，它会到达div的水平滚动条。我想如果div从未超过页面底部，我就不会遇到这个问题。

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

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

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

Answer 1

您的代码将div设置为覆盖整个页面。更改它以反映侧边栏的宽度:(左起200px，看起来你想要一个20px的填充，所以220。）

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

至于底部滚动条，我建议为表格元素设置“width：”。

table {
    width: 700px;
}

html：侧边栏+滚动div，高度设置为当前页面大小

1 个答案: