如何防止粘性页脚 + 内容可编辑 div 具有重叠内容答案

【问题标题】：How can I prevent a sticky footer + content editable div from having overlapping content如何防止粘性页脚 + 内容可编辑 div 具有重叠内容
【发布时间】：2017-08-25 06:54:24
【问题描述】：

所以我有一个 jsfiddle 描述了一个带有粘性页脚区域的 contenteditable div：https://jsfiddle.net/xd5p1h7u/

CSS

.textarea {
  background: white;
  padding: 20px;
  min-height: 20px;
  width: 100%;
}
.footer {
  height: 20px;
  position: sticky;
  bottom: 0;
  background: blue;
}

HTML

<div class="textarea" contenteditable="true"></div>
<div class="footer"></div>

如果您一直输入到屏幕底部，您会注意到粘性页脚覆盖了底部内容。我尝试了各种典型的技术，例如在不同的地方添加底部/顶部边距和填充，以防止内容被掩盖。

有没有纯css的方式来实现这个效果而不重叠内容？

【问题讨论】：

虽然出现了一个问题，但发布了一个答案，您是否希望粘性页脚保持在我提供的示例中的状态，还是应该与textarea 一起向下推？ ...此外，您在问题中看到的行为是使用 position: sticky 时的预期行为

标签： html css contenteditable sticky-footer

【解决方案1】：

通过这样更新您的 CSS，是否可以解决您的问题？

Updated fiddle

堆栈sn-p

html, body {
  margin: 0;
}
.textarea {
  background: white;
  padding: 20px;
  min-height: 20px;
  width: 100%;
  max-height: calc(100vh - 20px);
  overflow: auto;
  box-sizing: border-box;
}
.footer {
  height: 20px;
  position: sticky;
  bottom: 0;
  background: blue;
}

<div class="textarea" contenteditable="true">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
</div>
<div class="footer">

</div>

【讨论】：