根据窗口大小更改高度

时间:2013-10-28 17:29:44

标签: javascript jquery

我想将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);
    });
});

3 个答案:

答案 0 :(得分:0)

靠数学的力量!

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

答案 1 :(得分:0)

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

.gallery-container { height: 400px; }

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

答案 2 :(得分:0)

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

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