如何防止粘性页脚+内容可编辑div具有重叠内容 [英] How can I prevent a sticky footer + content editable div from having overlapping content

问题描述

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

So I have a jsfiddle describing a contenteditable div with a sticky footer area representing: 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>

如果你打字直到你到达屏幕的底部，你会发现粘性页脚掩盖了最底层的内容。我尝试了各种典型的技术，比如在各个地方添加底部/顶部边距和填充，以防止内容被掩盖。

If you type until you get to the bottom of the screen, you'll notice that the sticky footer covers up the bottom content. I've tried a variety of the typical techniques like adding bottom/top margins and paddings in various places to prevent the content from getting covered up.

是否有纯粹的css在没有重叠内容的情况下实现这种效果的方法？

Is there a purely css way to achieve this effect without overlapping content?

推荐答案

通过像这样更新你的CSS，这会解决你的问题吗？

By update your CSS like this, does that solve your issue?

更新小提琴

Stack snippet

Stack snippet

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具有重叠内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！