Css如何在聊天中自动调整混音窗口

Question

我这里有一个聊天窗口，但我无法以图形方式正确设置。

这是一个链接：http://jsfiddle.net/UD2KL/ 它有这种结构

<nav> </nav>
<div id="chatwindow">
   <div id="message window">
   </div>
</div>
<footer></footer> 

• 导航固定在顶部，有一些信息Chatwindow是Messenger Footer 包含文本框

所以顶部是好的，它是固定的，顶部也很好它是固定的，但通常消息应该出现在这里的中间我失败。

如果我给它一个高度的默认值，如480，那么它是好的，我得到一个滚动条等一些大小的窗口它是完美的但是当你使窗口更大或更小，所以你开始缩放窗口，消息div是堆栈到480 ....如果我使它自动高度，那么我永远不会得到滚动条...

任何人都可以帮忙解决这个问题吗？

由于

Answer 1

你的CSS和HTML很安静，我会为你提供一个CSS解决方案，但这可能不是一个简单的方法，通过使用包装器div和所有东西，但无论如何你使用jQuery所以使用.height()

if($(document).height() > $(window).height()) {
    $('#footer').css({'position': 'static'});
}

Demo

因此，这里的条件意味着if $(document).height()文件height超过$(window).height()，除了视口height之外，只有#footer而不是position。 1}} static到{{1}}

Answer 2

正如Alien先生指出的那样，你的CSS需要更多的组织。

但是，不管怎样，这是我的解决方案：http://jsfiddle.net/eH4nq/

重要的一点是$window.on('resize', function(e){部分。您基本上从从页脚到顶部的距离减去容器到顶部的距离。

我还在CSS中做了一些小改动。我在正文上添加了height: 100%，缩小了边距并移动了overflow: auto上的#chatwindow。