html - 标题为动态时，中间 div 内容不会溢出

Question

我有 3 个垂直对齐的 div（页眉、内容、页脚）

<div id="container">
   <div id="header"> </div>
   <div id="content"> </div>
   <div id="footer"> </div>
</div>

像这样：

在此处输入图像描述

就像在这个例子中一样：http: //jsfiddle.net/jS6pa/2/

正如您在 jsfiddle 示例中所见，我无法完成所有要求。当我调整窗口大小时，页脚 div 不会折叠内容。如果我做了一些 tweeks 我可以实现这一点，但是溢出：滚动不工作并且滚动条不显示

这是我尝试解决此问题的另一种方法（没有成功：S）：http: //jsfiddle.net/rv4XS/31/

我不知道一种或另一种方法是解决这个问题的最佳方法。只需检查第一个或第二个 jsfiddle 看看哪个是最好的

如何在标题具有动态内容的情况下实现全高内容，同时在内容溢出时显示滚动条？

提前感谢您的帮助。

score 0 · Accepted Answer

好的，我终于使用javascript实现了这一点。

这个想法很简单。无论如何，必须设置标题的高度。

为此我不知道为什么（可能是因为在 ajax 中调用了这个 div）但是 jquery .height() 方法对我不起作用，但使用 clientHeight 方法对我很有效。

var header = document.getElementById('headerDiv');

if(header)
{
    $('contentDiv').css('top', header.clientHeight);
}

1 回答 1