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

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

其余的空间（少一些填充）应该填充'视图'的其余部分。不过我是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); 
});

来源

2013-10-17 petedunc88

这也许是：'（4 * padding） - 3）'？除此之外，你的意思是“我3px远” - 你的JSFiddle看起来完全对齐 – Bojangles

对不起，没有很好地描述。我期待'4 * padding'是所有需要的 - 但是我已经减去了'3px'来手动排列东西。为此编辑OP。 – petedunc88

我认为这是与'padding：.25em 5px .25em 5px;'''styleDivTitle''关联的。更改计算以使用'.. $（“＃styleDivTitle”）。outerHeight（true） - （2 * padding）'也正确对齐。 – petedunc88

我这里使用的是如下，关键的区别使用.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的。

来源

2013-11-22 23:02:48 petedunc88

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

回答

相关问题