html - 如何防止粘性页脚 + 内容可编辑的 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>

如果一直打到屏幕底部，您会注意到粘性页脚盖住了底部内容。我尝试了多种典型技术，例如在不同位置添加底部/顶部边距和填充，以防止内容被遮盖。

有没有一种纯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>