jquery - 如何根据内容的变化动态设置两行的高度

Question

我正在尝试制作固定位置的侧边栏。它包括:

• 固定高度的标题。
• 具有动态内容的 div(人员列表及其详细信息)。
• 带有聊天区域的 div(也是动态的)。
• 带有输入和发送按钮的页脚，始终位于底部。

几个小时后，我得到了这个: http://jsfiddle.net/Nippon/cVnDf/

var $window = $(window),
    $wrapper = $('.chat');

$window.resize(function(){
      $wrapper.css({
          height: $window.height() * 0.55 - 105 + "px"
      });
}).resize();

它没有像我预期的那样完全工作(jquery 有点新)。如何将聊天 div 的高度设置为始终填满屏幕，以较小的分辨率调整大小/窗口调整大小并对扩展/折叠名称 block 使用react并删除/添加一个(不会总是有 3 个 block )？

Answer 1

我不确定您打算用 * 0.55 做什么。如果您希望聊天填充剩余空间，只需从总窗口高度中减去其他元素的高度，如下所示:

$window.height() - $(".topWrapper").outerHeight() - $(".sendArea").outerHeight()

I'm using outerHeight() to account for any margins and padding.

I also find it easier to create a separate function to apply the height, which can be applied on resize, on expanding the menu, etc.

--

Edit: You also need to make sure setHeight fires after the toggle animation finishes, so the height is accurate. Try this:

var $window = $(window),
$wrapper = $('.chat');

function setHeight() {
    th = $(".topWrapper").outerHeight();
    sa = $(".sendArea").outerHeight();
    $wrapper.css("height", $window.height() - th - sa - 20);
}

$window.resize(function(){
    setHeight();
}).resize();

$(".daneExpand").click( function() {
    $('.dane').not($(this).next()).slideUp(400);
    $(this).next().slideToggle(400, setHeight);
});