設置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

為什么不使用CSS？

html, body{
  height: 100%;
}

.one{
    height: 50%;
}

.two {
    height: 25%;
}

Answer 2

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

無需在編碼中說'px' 。 它不會有任何效果..如果不設置，它將僅作為像素。 要降低50％的高度，您可以按50/100 50/100=1/2分數進行計算。 因此，上述編碼將使您的身高降低50％。25％的相似度使用25/100 25/100=1/4

Answer 3

在這里，您可以開始：Fiddle： http : //jsfiddle.net/Lk7Ve/和http://jsfiddle.net/Lk7Ve/2/

這是50％和25％。 如果要80％和20％，則必須分別乘以（4/5）和（1/5）。

$(document).ready(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'});
});

對於80％和20％

$(document).ready(function(){
    $('.one').css({'height':(($(window).height() * (4/5)))+'px'});
    $('.two').css({'height':(($(window).height() * (1/5)))+'px'});
});
$(window).resize(function(){
    $('.one').css({'height':(($(window).height() * (4/5)))+'px'});
    $('.two').css({'height':(($(window).height() * (1/5)))+'px'});
});

Answer 4

實際上，我建議先獲取兩個事件的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
        });
    });

小費：

• 嘗試將load和resize事件綁定在一起，這樣可以節省代碼長度。
• 另外，在jQuery中無需提及帶有高度的單位px。

祝好運！ 快樂的jQuery！