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

Question

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

剩余空间(减去一些填充)应填充“ View ”的其余部分。然而我距离 3px - 谁能解释为什么？

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

JSFiddle 显示问题 here

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 here .