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

I am trying to find the solution for displaying very wide and long tables. My header and footer are fixed by using CSS style position: fixed;where as my container is flexible to contain any amount of data. Below is my page layout.

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

---

Header

头

---

Container div

集装箱div

My Table

我的表

End of div

div结束

---

Footer

页脚

---

I have made my container div horizontally scrollable but to find the scroll bar I have to scroll down until the end of the whole page or table in my context.

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

So is there is anyway I can make my scrollbar appear just before the end of the browser window or in other words I make it fixed just like my header and footer, so that I don't need to scroll down the whole page for looking my table data.

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

I appreciate if you can provide me any help.

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

EDIT Here are the images for your help

编辑以下是您的帮助图片

Image before Scrolling

滚动前的图像

Image after Scrolling down

向下滚动后的图像

2 个解决方案

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

#2

You can try to set the height of the table to the total height of the window, so that upon landing your page consists of a div with a horizontal and vertical scroll bar. Make the div something like width:100%; height: 780px; (height of my window)

您可以尝试将表格的高度设置为窗口的总高度，以便在着陆时您的页面包含一个带有水平和垂直滚动条的div。使div像宽度：100％;身高：780px; （我窗户的高度）