DIV重叠粘性页脚 [英] DIV overlapping sticky footer

问题描述

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

I have a div containing three other divs: 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：

Footer is always at the bottom of the parent div. Here is some 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的高度来完成，但这对我来说并不好 - 带有'note'类的div可以调整大小。我怎么能这样做？

Middle div is for text input. The problem is that it overlaps the footer when there is too much text. I want the middle div to be a scrollable area, that does not overlap footer. It can be done with setting height of that div, but this is not good for me - the div with class 'note' will be resizable. How can I do it?

这里有工作人员： http://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview

推荐答案

首先要做的事情：

删除页脚上的绝对定位。

Remove the absolute positioning on the footer.

position: absolute;

这会使文档正常流量的页脚在...之外。因此，如果您的内容增加，页脚将始终与内容重叠。

This takes the footer 'outside' of the normal flow of the document. So, if your content increases, the footer will always appear to 'overlap' withe the content.

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

Instead, use relative positioning for the footer:

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

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

}

在上面的代码中，您可以更改高度内容，你会发现页脚总是停留在页面的底部，而不管内容的大小。

In the above code, you can change the height of the content and you will observe that the footer always stays at the bottom of the page irrespective of the 'size' of the content.

你还需要添加一分钟 - 内容div的高度，以便显示页脚始终位于屏幕底部的外观。我以为我会告诉你的事情!!

You'll also need to add a min-height to the content div so that gives the appearance taht the footer is always at the bottom of the screen. Just thought I'll let you know that!!

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

希望这会有所帮助!!!

Hope this helps!!!

这篇关于DIV重叠粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！