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

Question

所以我有一个 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>

如果一直打到屏幕底部，您会注意到粘性页脚盖住了底部内容。我已经尝试了各种典型的技术，例如在各个地方添加 bottom/top 边距和填充以防止内容被遮盖。

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

Answer 1

像这样更新您的 CSS，是否解决了您的问题？

Updated fiddle

堆栈片段

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>

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

How can I prevent a sticky footer + content editable div from having overlapping content

html

css

contenteditable

sticky-footer