javascript - 可 ScrollView /组件中按钮的固定位置

Question

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

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

尝试用我的代码在我的沙箱中重现问题。不完全相同但相似: 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>