DIV重叠粘页脚

Question

我有一个包含其他三个div的div：页眉，内容，页脚

  <div class="note">
    <div class="header">Title</div>
    <div class="content" contenteditable="true">Some content</div>
    <div class="footer">Footer</div>
  </div>

页脚始终位于父div的底部。这是一些CSS：

.note {
  position: relative;
  width: 40%;
  height: 200px;
  overflow: hidden;
  padding: 6px;
  margin-top: 10px;
}
.note .footer {
  position: absolute;
  bottom: 0px;
}
.note .content {
  overflow: hidden;
}

Middle div用于文本输入。问题是当文本过多时，它与页脚重叠。我希望中间div是可滚动区域，而不与页脚重叠。可以通过设置该div的高度来完成，但这对我来说不好-带有“ note”类的div可以调整大小。我该怎么做？

这是工作的插件：http ://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview

Answer 1

首先要注意的是：

删除页脚上的绝对位置。

position: absolute;

这使页脚位于文档正常流程的“外部”。因此，如果您的内容增加，则页脚将始终与内容“重叠”。

相反，对页脚使用相对定位：

.content {
    background-color:Orange;
    height:400px;
    overflow: hidden;
}

.footer {
    position: relative;
    bottom: 0px;
    background-color:Black;
    color:White;

}

在上面的代码中，您可以更改内容的高度，并且会发现页脚始终停留在页面底部，而不管内容的“大小”如何。

您还需要向内容div添加一个最小高度，以便使页脚的外观始终位于屏幕底部。只是以为我会让你知道的！

看到这里-> http://jsfiddle.net/9dUJY/

希望这可以帮助！！！