问题
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.
Is there a purely css way to achieve this effect without overlapping content?
回答1:
By update your CSS like this, does that solve your issue?
Updated fiddle
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>
来源:https://stackoverflow.com/questions/43133266/how-can-i-prevent-a-sticky-footer-content-editable-div-from-having-overlapping