DIV重叠粘页脚

我有一个包含另外三个的div一个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; 
}

中间div用于文本输入。问题在于，如果文本太多，它会重叠页脚。我希望中间div是一个可滚动区域，它不会重叠页脚。它可以通过设置该div的高度来完成，但这对我并不好 - 具有类“note”的div将可调整大小。我该怎么做？

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

来源

2014-06-09 user1091733

将'overflow：scroll'添加到您的.note .content – Kiee

但它仍然重叠页脚 – user1091733

首先第一件事情：

卸下页脚中的绝对定位。

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/

希望这有助于！

来源

2014-06-09 20:15:09

我不能在'.content'上拥有绝对高度。这是做到这一点的唯一方法吗？ – user1091733

您可以拥有任何内容高度。不管内容的密度如何，页脚div始终停留在内容的底部。无论内容是2px还是100px页脚，都会始终保持在其下方。多数民众赞成在我想要指出的小提琴:) –

尝试更改高度的值2px和1000px在小提琴中，你“观察脚注自动调整，始终保持正确的内容下方。 –

你的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%; 
}

来源

2014-06-09 20:09:12

太棒了！像魅力一样工作。 'width：100％;'.note中的footfoot真的很必要吗？ – user1091733

不，这只是我做的第一件事，以确保您看不到页脚中的内容。真正的问题是将设置设置为overflow-x和overflow-y，然后将高度设置为无论你想限制它。 –

经过一番测试后发现这不是完美的解决方案。内容div的百分比高度会使它在不同高度的音符上与页脚有不同的距离。例如，对于高度为500px的div'note'，内容和footer之间的差距比div'note'之间的差距高200px – user1091733

是否音符的高度需要在100px的设置？您可以为页脚设置高度，然后将.note中的填充底部与页脚高度相等以避免重叠。我用30px作为例子，并删除了固定的高度。 Try it here。

来源

2014-06-09 20:11:17 tsHunter

我不希望音符展开，它应该始终保持相同的高度。 – user1091733

您的内容没有设置高度，并且没有激活滚动。您将滚动条添加到100像素高的容器中，这一事实让我觉得您稍后会遇到可用性问题。

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

来源

2014-06-09 20:15:01

DIV重叠粘页脚

回答

相关问题