使用javascript计算div高度百分比?

时间:2015-07-03 12:56:32

标签: javascript jquery html css

经过一些搜索后,我遇到了类似下面演示的代码,它使用js来计算div的高度,然后将该数字设置为下面div的上边距。

这很好但是我需要它以百分比计算而不是“px”。当我缩小并且响应图像变小时,边缘顶部显然不会随之缩放。我不确定这是否可能或我将如何实现它?

jsFiddle

JS:

$(document).ready( function(){
  var fixedHeight = $(".fixed-container").outerHeight(true);
  $(".scrolling-container").css({"float":"left", "margin-top":
  fixedHeight + "px"});
});

非常感谢任何建议或解决方案。

3 个答案:

答案 0 :(得分:1)

如果您使用jQuery,则不需要百分比。在窗口更新时,使用$(window).resize()更新它。

您不能在高度上使用百分比的另一个原因是您没有具有设定高度的容器。这意味着它将占整个页面的百分比。您添加的内容越多,保证金就越大。使用此代码来实现您正在做的事情:

function extraMargin() {
    var xMar = $('.fixed-container').outerHeight(); 
    $('.scrolling-container').css({"margin-top":xMar+"px"});
}
$(document).ready(function(){
    extraMargin();
});
$(window).resize(function(){
    extraMargin();
});

这将在页面加载和页面调整大小时运行extraMargin()函数。

Here's a fiddle

答案 1 :(得分:0)

如果我以正确的方式理解你的问题,我希望以下步骤有效。

SELECT
S_ID,
LAG(S_ACTV_CODE, 1) OVER (PARTITION BY S_ID ORDER BY S_DATETIME ASC) AS S_ACTV_CODE_PREV,
S_ACTV_CODE,
S_USER,
S_DATETIME AS START_TIME,
LEAD(S_DATETIME, 1) OVER (PARTITION BY S_ID ORDER BY S_DATETIME ASC) AS END_TIME,
DATEDIFF (SECOND, S_DATETIME,
LEAD(S_DATETIME, 1) OVER (PARTITION BY S_ID ORDER BY S_DATETIME ASC)) AS DURATION 
FROM (
SELECT
S_ID,
LAG(S_ACTV_CODE, 1, 'N/A') OVER (PARTITION BY S_ID ORDER BY S_DATETIME ASC) AS S_ACTV_CODE_PREV,
S_ACTV_CODE,
S_USER,
S_DATETIME
FROM TABLE1
) X WHERE ISNULL(S_ACTV_CODE_PREV,'') != ISNULL(S_ACTV_CODE,'')
ORDER BY S_ID, START_TIME;

答案 2 :(得分:0)

实际上也重复调整大小窗口函数的完整代码:

$( window ).resize(function() {
   var fixedHeight = $(".fixed-container").outerHeight(true);
  $(".scrolling-container").css({"float":"left", "margin-top":fixedHeight + px"});
});