jquery - css如何使聊天中的迷你窗口自动调整

Question

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

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

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

• Nav 固定在顶部，带有一些信息的 Chatwindow 是 Messenger 页脚 包含文本框

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

如果我给它一个默认的高度值，比如 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() 只不过是视口(viewport) height 而不是将 #footer position 设置为 static