如何将水平div滚动条浮动在固定的CSS div中

Question

我正在尝试寻找一种可以显示非常宽和长的表格的解决方案。我的标题和页脚使用CSS样式position: fixed;进行固定，而我的容器则可承载任何数量的数据。以下是我的页面布局。

---

标题

---

容器div

我的表格

结束div

---

页脚

---

我已经使我的容器div可以水平滚动，但是要找到滚动条，我必须向下滚动整个页面或表格。因此，有没有办法使滚动条出现在浏览器窗口的末尾之前，换句话说，让它像我的页眉和页脚一样固定，这样我就不需要滚动整个页面来查看表格数据了。

如果你能提供帮助，我将不胜感激。 编辑 以下是您的帮助图片:

滚动前的图片 滚动后的图片

- geeksal

---

一个 JSFiddle 演示将非常有帮助。不过，据我所知，如果没有一些 hacky 的 JavaScript，你无法改变滚动条的实际位置。 - Aziz

@Aziz，请看我刚刚上传的图片。如果您能提供一个可行的JavaScript解决方案，那就没有问题，但是CSS会更好。 - geeksal

Answer 1

header {
  top: 0;
}

footer {
  bottom: 0;
}

header, footer {
  position: fixed;
  background: tomato;
  width: 100%;
  color: white;
  height: 20px;
  text-align: center;
}

div {
  position: fixed;
  top: 20px;
  overflow: auto;
  bottom: 20px;
  width: 100%;
}

td {
  white-space:nowrap;
}

table {
  border-collapse:collapse;
}

td {
  border: 1px solid black;
}

<header>
  The Header
</header>

<div>
  <table>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
    <tr><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td><td>some data</td></tr>
  </table>
</div>

<footer>
  The Footer
</footer>

- Muhammad

---

解决方案在你的情况下似乎有效，但在我的情况下，表格会在某个位置冻结，无法滚动。 - geeksal

终于搞定了！你救了我的一天！ - geeksal

Answer 2

您可以尝试将表格的高度设置为窗口的总高度，以便在页面加载时创建一个带有水平和垂直滚动条的 div。将该 div 设定为类似于 width:100%; height: 780px;（我的窗口高度）的样式即可。

- Meers E. Chahine