javascript - 根据窗口大小更改高度

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

我找到了另一种目前似乎运行良好的解决方案。

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

Answer 2

借助数学的力量！

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

Answer 3

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

.gallery-container { height: 400px; }

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