Javascript 可滚动视图/组件中按钮的固定位置

我有一个包含数据的详图索引（office fabric ui）。当数据太多时，调用区域可滚动。但是，我希望同一详图索引组件中此数据下的页脚/页脚中的按钮始终可见。我尝试为按钮添加“位置：绝对/固定”。它保持在原位，但可滚动部分中的数据“按下”按钮，即使按钮不可见。参见图

在上面，您可以看到“完成”按钮有一个绝对/固定的位置。它总是可见的，但它会通过标签显示出来，即使它是可滚动的。我希望它在可滚动视图中作为一个页脚，并始终显示在那里，而不是在页边空白处。请参见第二张图片，了解我想要实现的行为

试图用我的代码在我的沙箱中重新创建问题。不完全相同但相似：

*{
框大小：边框框；
}
部分{
身高：6em；
宽度：10em；
位置：相对位置；
边框：1px实心；
}
div{
身高：100%；
溢出：自动；
垫底：2米；
}
页脚{
位置：绝对位置；
底部：0；
左：0；
右：17px；
线高：2米；
背景：白色；
文本对齐：居中；
}

0
1
2
3
4
5
6
7
8
9

页脚按钮