Question

我有一个包含其他三个div的div：header，content，footer

  <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;
}

中间div用于文本输入。问题是当文本太多时它会与页脚重叠。我希望中间div是一个可滚动的区域，它不会与页脚重叠。这可以通过设置div的高度来完成，但这对我来说并不好 - 带有课程的div＆＃39;注意＆＃39;将是可调整大小的。我该怎么办？

以下是工作人员：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中添加一个min-height，以便显示页脚始终位于屏幕底部的外观。我以为我会让你知道!!

在此处查看 - ＆gt; http://jsfiddle.net/9dUJY/

希望这有帮助!!!

Answer 2

将您的CSS更改为以下内容：

.note {
  position: relative;
  width: 40%;
  height: 100px;
  padding: 6px;
  margin-top: 10px;
  border-style: solid;
}
.note .footer {
  position: absolute;
  bottom: 0px;
  background-color:#fff;
  /* width:100%; */
}
.note .content {
  overflow-y: scroll;
  overflow-x:hidden;
  height:60%;
}

Answer 3

音符的高度是否需要设置为100px？您可以设置页脚的高度，然后在.note中添加填充底部等于页脚高度，以防止它们重叠。我使用30px作为示例并移除了固定高度。 Try it here

Answer 4

您的内容没有设置高度，也没有激活滚动。您将滚动添加到100px高度容器的事实让我觉得您以后会遇到可用性问题。

updated version

请注意支持的浏览器，如果您只使用现代实例，那么您就可以了。它出现的IE8是支持的。

Check the MDN Docs

.note {
  position: relative;
  width: 40%;
  height: 100px;
  padding: 6px;
  overflow: hidden;
  margin-top: 10px;
  border-style: solid;
}
.note .footer {
  bottom: 0px;
}
.note .content {
  overflow-y: scroll;
  overflow-x:hidden;
  height:70px;
}

DIV重叠粘性页脚

4 个答案: