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

Question

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

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

试图用我的代码在我的沙箱中重新创建问题。不完全相同但相似： https ://codesandbox.io/s/6v7m7mk8vz?fontsize=14

Answer 1

* {
  box-sizing: border-box;
}

section {
  height: 6em;
  width: 10em;
  position: relative;
  border: 1px solid;
}

div {
  height: 100%;
  overflow: auto;
  padding-bottom: 2em;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 17px;
  line-height: 2em;
  background: white;
  text-align: center;
}

<section>
  <div>
    <ul><li>0<li>1<li>2<li>3<li>4<li>5<li>6<li>7<li>8<li>9</ul>
    <footer><button>Footered button</button></footer>
  </div>
</section>