Question

我想将div的高度更改为百分比而不是基于像素，我有以下代码，我很好奇我现在如何将其从像素更改为百分比。

最终结果是我希望div根据窗口当前高度的百分比重新调整其高度。

编辑：根据以下代码的高度和宽度条件实际上并不需要，但它是用于测试目的，因为我试图找到解决方案。

请原谅我的天真，我对JavaScript比较陌生。

$(function(){
    $(window).resize(function(){
        var h = $(window).height();
        var w = $(window).width();
        $(".gallery-container").css('height',(h < 768 || w < 1024) ? 800 : 400);
    });
});

Answer 1

靠数学的力量！

var h = $(window).height();
var scale = 0.75; // This is 75%
$(".gallery-container").css('height', h * scale);

Answer 2

根据你的JavaScript代码（我猜它不完全正确）这是CSS中的相应解决方案：

.gallery-container { height: 400px; }

@media screen and (max-width: 1024px) or (max-height: 768px)  {
 .gallery-container { height: 800px; }
}

Answer 3

我发现另一种解决方案目前似乎完美无缺。

$(window).resize(function(){
   var newheight = $(window).innerHeight();      
   $(".gallery-container, #static ul li img").height(newheight / 2);
});

根据窗口大小更改高度

3 个答案: