javascript - 垂直布局 - 计算并应用 DIV 高度

Question

我整理了一个简单的垂直布局。它由标题栏和内容组成。标题栏可以有不同的高度，所以我用.height()它来确定它，然后$(window).height()找到我的剩余空间。

剩余的空间（少一些填充）应该填满“视图”的其余部分。但是我3px不在 - 谁能解释为什么？

编辑：我正在3px用(4 * padding) - 3)代码行补偿。

JSFiddle 在此处显示问题

function setScrollingDivHeight() {
 var div = $("#styleDivTitle");
 var padding = 5;
 $("#styleDivScrolling").height($(window).height()
  - $("#styleDivTitle").height() - (4 * padding) - 3);
}


$(window).load(function () {
 setScrollingDivHeight();
 $(window).resize(setScrollingDivHeight);
});

Answer 1

我在这里使用的解决方案如下，主要区别在于使用.outHeight(true)：

var padding = 5;

function setScrollingDivHeight() {
    $("#styleDivScrolling").height($(window).height() - $("#styleDivTitle").outerHeight(true) - (2*padding));
}

$(window).load(function () {
    setScrollingDivHeight();
    $(window).resize(setScrollingDivHeight);
});

JSFiddle 的结果在这里。