如何使水平div滚动条像固定的CSS div一样浮动

Question

我正在尝试找到显示非常宽和长表的解决方案。 我的页眉和页脚是使用CSS样式position: fixed;修复的，因为我的容器可以灵活地包含任意数量的数据。下面是我的页面布局。

标题

Container div

我的表

div的结尾

页脚

我已经使我的容器div可以水平滚动但是为了找到滚动条，我必须向下滚动直到我的上下文中整个页面或表的末尾。

所以无论如何我可以让我的滚动条出现在浏览器窗口的末尾之前，或者换句话说，我就像我的页眉和页脚一样修复它，这样我就不需要向下滚动查看我的表格数据的整页。

如果你能给我任何帮助，我感激不尽。

修改 以下是您的帮助图片

滚动前的图片

向下滚动后的图像

Answer 1

{ "students": [{"Rohan":"example1.com"}]

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

Answer 2

您可以尝试将表格的高度设置为窗口的总高度，以便在着陆时您的页面包含一个带有水平和垂直滚动条的div。将div设为width:100%; height: 780px;（窗口高度）