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/

(此处示例:http://peterned.home.xs4all.nl/examples/csslayout1.html)

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

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

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

在header有动态内容的场景下，如何实现全高内容，同时在内容溢出时显示滚动条？

在此先感谢您的帮助。

Answer 1

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

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

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

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

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