javascript - 使用javascript以百分比计算div高度？

Question

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

这很好用，但是我需要它以百分比而不是“px”来计算，因为当我缩小并且响应图像变小时，边距顶部显然不会随它缩放。我不确定这是否可行或我将如何实现它？

jsFiddle

JS:

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

如有任何建议或解决方案，我们将不胜感激。

Answer 1

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

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

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