问题描述
所以我有一个jsfiddle描述一个具有粘性页脚区域的contenteditable div:
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具有重叠内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!