Question

我想要一张占据整个屏幕的桌子，它有侧边栏，底栏和主面板。每个都应该能够独立滚动，在任何情况下都不应该整个页面都有滚动条。

这就是我所拥有的：

＆＃13;

<div style="width: 100%; height: 100%; display:block;">
  <table style="position: absolute; width: 100%; height: 100%; border-collapse: separate; border-spacing: 1px;">
    <tbody style="height:100%">
      <tr>
        <td id="sidebar" style="width: 200px; height: 100%; vertical-align: top;" rowspan="2">
          <div style="width: 200px;height: 100%;margin: 0;padding: 0;overflow-y: scroll;overflow-x:auto;">
            Side
          </div>
        </td>
        <td id="stepeditor" style="vertical-align: top; position: relative; display: block; width: 100%; height: 100%;">
          <div style="position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow: scroll;">
            main
          </div>
        </td>
      </tr>
      <tr>
        <td style="vertical-align: top; height: 200px; border-top: 1px solid;">
          <div style="width: 100%; height: 200px; margin: 0; padding: 0; overflow: scroll;">
            bottom
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

我一直在搞乱很多选项，目前只有侧边栏按我想要的方式工作，但整个窗口仍然有滚动条，我不知道为什么它们在那里。

如何使其正常工作？

Answer 1

解决方案：https://jsfiddle.net/mj0baug5/

而不是overflow:auto为每个小组使用overflow-x:hidden; overflow-y:scroll;。这将启用垂直滚动但不能水平滚动。

限制页面滚动使用：

body {
  overflow: hidden;
}

Answer 2

你的风格问题。

对于身体需要设定的边距：0;
对于tbody，不需要设置高度= 100％
表中的边框也是一个问题，最好移动到div（如果需要边框）

<style>
     html, body {padding: 0; margin:0;  width: 100%; height: 100%;}
</style>

<div style="width: 100%; height: 100%; display:block;">
  <table style="position: absolute; width: 100%; height: 100%; ">
    <tbody >
      <tr>
        <td id="sidebar" style="width: 200px; height: 100%; vertical-align: top;" rowspan="2">
          <div style="width: 200px;height: 100%;margin: 0;padding: 0;overflow-y: scroll;overflow-x:auto;">
            Side
          </div>
        </td>
        <td id="stepeditor" style="vertical-align: top; position: relative; display: block; width: 100%; height: 100%;">
          <div style="position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow: scroll;">
            main
          </div>
        </td>
      </tr>
      <tr>
        <td style="vertical-align: top; height: 200px; border-top: 1px solid;">
          <div style="width: 100%; height: 200px; margin: 0; padding: 0; overflow: scroll;">
            bottom
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

表格单元格中的滚动条

2 个答案: