javascript - 将表格固定在可查看页面的底部但在该表格内滚动？

Question

所以我创建了一个站点来使用 javascript 动态加载内容。我有一个表格，我希望在滚动主页时​​将其“装订”在页面底部。但我也需要此表格进行滚动，因为内容将在水平和垂直方向上超出浏览器的可视区域。

我试过这个 CSS 来让它工作:

#comparison_table {
  overflow: scroll;
  position: absolute;
  bottom: 0%;
  width: 99%;  /* Not 100% so as to not prompt the body-wide scroll bars */ 
  height: 15%;
  background-color: yellow;
}

“绝对”非常适合位置，直到我需要页面的主体向下滚动。然后表格向上移动并离开页面。

“固定”效果很好，因为它位于浏览器查看区域的底部。但是，表格无法垂直滚动会出现问题。 (还没有设法横向测试它。)

因此，如果我有足够的内容超过#comparison_table 中的 15% 高度，我将无法滚动到任何使用 position:fixed 被 chop 的内容。使用 position:absolute，然后我的表格不会在我滚动时停留在页面底部。

我最终要寻找的是两全其美:固定和绝对以某种方式结合。我还没有找到这样做的诀窍。

Answer 1

#comparison_table{
overflow:scroll;
position:fixed;
top:85%;
width:99%; <!-- Not 100% so as to not prompt the body-wide scroll bars-->
bottom:0%;
height:15%;
background-color:yellow;
}
#big_table{
height:80%;
position:fixed;
bottom:15%;
top:5%;
overflow:scroll;
}

在弄乱了一堆设置之后，我想到不仅要为我想要的“悬停表”定义一个位置，还要为“背景表”定义一个位置。将页面分成两个可滚动的部分是可行的。我不知道通过定义顶部和底部以及高度是否存在冗余代码/属性，但这是我可以想出的工作代码。

我仍然很好奇是否有人知道可以更明确地回答我的问题的替代方法。