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

【问题标题】：Fixed position in a button in a scrollable view/component可滚动视图/组件中按钮的固定位置
【发布时间】：2019-08-18 23:12:48
【问题描述】：

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

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

尝试使用我的代码在我的沙盒中重现问题。不完全相同但相似： https://codesandbox.io/s/6v7m7mk8vz?fontsize=14

【问题讨论】：

标签： javascript html css reactjs office-fabric

【解决方案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>

【讨论】：