1

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

  • 具有固定高度的标题。
  • 具有动态内容的 div（ppl 列表及其详细信息）。
  • 带有聊天区域的 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 的高度设置为始终填满屏幕、在较小的分辨率上调整大小/窗口调整大小并对扩展/折叠名称块和删除/添加一个（不会总是有 3 个块）做出反应？

4

1 回答 1

1

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

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

我outerHeight()用来解释任何边距和填充。

我还发现创建一个单独的函数来应用高度更容易，它可以应用于调整大小、扩展菜单等。

--

编辑：您还需要确保 setHeight在切换动画完成后触发，因此高度是准确的。尝试这个：

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);
});
于 2013-07-15T19:25:29.233 回答