ウィンドウの高さを取得後に要素へ代入する

よく使うメモ。

スマートフォン用に高さ 100vh とか使いたいところですが、CSSによっては適切に高さが設定されずに 0 となってしまうのでJavascriptで対応してしまうと考える手間が省けるのでお薦め。

$(document).ready(function(){
        // 画面の高さを取得して、変数wHに代入
        var wH = $(window).height();

        // .hoge の高さを取得を取得して、変数divHに代入
        var divH = $('.hoge').innerHeight();

        // ボックス要素より画面サイズが大きければ実行
        if(wH > divH){

            //.hoge に高さを代入
            $('.hoge').css('height',wH+'px');

        }
});

$(document).ready(function(){

// 画面の高さを取得して、変数wHに代入

var wH = $(window).height();

// .hoge の高さを取得を取得して、変数divHに代入

var divH = $('.hoge').innerHeight();

// ボックス要素より画面サイズが大きければ実行

if(wH > divH){

//.hoge に高さを代入

$('.hoge').css('height',wH+'px');

}

});

共有:

いいね: