设置div的高度，相对于浏览器窗口高度

Question

当前，这将确定窗口高度，并将.one的高度设置为窗口高度的1/2，将.two设置为窗口高度的1/4。

如何将其重新格式化，使其使用基于百分比的高度而不是分数？

我想做80%/20%或70%/30%的事情。提前谢谢。

$(function(){
    $(window).load(function(){
        $('.one').css({'height':(($(window).height()/2))+'px'});
        $('.two').css({'height':(($(window).height()/4))+'px'});
    });
    $(window).resize(function(){
        $('.one').css({'height':(($(window).height()/2))+'px'});
        $('.two').css({'height':(($(window).height()/4))+'px'});
    });
});

Answer 1

实际上，我建议先在这两个事件上获得window的高度。然后应用简单的数学计算。

$(function(){
    $(window).bind("load resize", function(){
        _winHeight = $(window).height();

        // Setting Height
        $('.one').css({'height':_winHeight * 0.5}); // 0.5 = 50%, 0.8 = 80%
        $('.two').css({'height':_winHeight * 0.25}); // 0.25 = 25%
    });
});

或者，您可以将窗口的单位高度存储在变量中，并根据需要应用多少百分比，如下所示：

$(function(){
        $(window).bind("load resize", function(){
            _winHeight = $(window).height()/100;

            // Setting Height
            $('.one').css({'height':_winHeight * 50}); // 50% Height
            $('.two').css({'height':_winHeight * 25}); // 25% Height
        });
    });

提示：

• 尝试将加载和调整大小的事件绑定在一起，这将节省您的代码长度。
• 此外，没有必要在jquery中提到具有高度的单元px。

祝好运!jQuery快乐！！

Answer 2

为什么不使用CSS呢？

html, body{
  height: 100%;
}

.one{
    height: 50%;
}

.two {
    height: 25%;
}

Answer 3

$(function(){
    $(window).load(function(){
        $('.one').css({'height':($(window).height()/2)});
    });
 });

在编码中没有必要说'px'。不会有任何效果..。如果不设置，它将只作为像素。要降低50%的高度，你可以计算分数作为50/100=1/2。所以上面的编码会使你的身高降低50%。同理25%使用25/100=1/4