web-dev-qa-db-ja.com

ビューポートの高さに基づいてDIVの高さを動的に設定する

Divの高さをビューポートの高さの30％に設定しようとしていますが、ビューポートの高さが変更されたときにスケーリングしたいと思います。

最小の高さを30％に設定してみました。高さ：30％ですが、機能していません。

JQueryのheight（）;を調べました。でもどうやって始めたらいいのかわからない。

ありがとう。

jqueryheightviewport
12
elbatron
function thirty_pc() {
    var height = $(window).height();
    var thirtypc = (30 * height) / 100;
    thirtypc = parseInt(thirtypc) + 'px';
    $("div").css('height',thirtypc);
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});
28
Liam Bailey

これは基本的にLiamBaileyの答えですが、thirty_pc（）を使用すると、より高速で簡潔になるはずです。

function thirty_pc() {
    $("div").css('height', '' + Math.round(.3 * window.height()));
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});

あなたがそれを好きなら、それでもリアムのものを受け入れてください、しかし私のものに賛成してください。 :)

20
Bernd Haug
window.onresize=function(){
    $("#selectedDiv").height( ($(window).height()*.3) );
}
0
nathan

これは、Jqueryを使用して、このクラスを持つすべてのdiv、セクションのビューポートの高さに対して100％機能します。追加機能を使用して高さを30％に調整します。現在は100％です。よろしければ宣伝してください。

function thirty_pc() {
    $(".introduction").css({'height':($(window).height())+'px'});
}

$(document).ready(function() {
    thirty_pc();
    $(window).bind('resize', thirty_pc);
});
0
Nikhil Goswami