Question

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

剩余的空间（减去一些填充）应该填充“视图”的其余部分。但是我3px离开了 - 任何人都可以解释原因吗？

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

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);
});

结果here的JSFiddle。

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

1 个答案: