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

Question

我有一个带有数据的标注（办公室结构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>