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

假如想象 提交于 2020-01-17 06:10:31

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!