Web production note

　【更新日 : 】

【jQuery】コンテンツの高さをウィンドウの高さと同じにする

Category：
jQuery
Tags：
,

現代の実装ではCSSに追加された単位100vhや100dvhなどで対応できる可能性が高いため、できる限りCSSで実装することを推奨します。

コンテンツをウィンドウの高さに可変させるコードのサンプルです。
トップページのメインエリアをフルスクリーンにしたい場合などに使える方法だと思います。

HTML

<section id="main-area">
	コンテンツ
</section>

JavaScript

//エリアの指定
var mainArea = $('#main-area');
//ウィンドウの高さを取得
var winHeight = window.innerHeight ? window.innerHeight: $(window).height();

//高さ指定
mainArea.css({'height':winHeight});

//ウィンドウサイズ監視
$(window).on('resize', function(){
	winHeight = window.innerHeight ? window.innerHeight: $(window).height();
	mainArea.css({'height':winHeight});
});

SPの時は設定を解除させたい場合

ブレークポイントを設定してスマホサイズの時に、高さのスタイルを削除するように設定を追加します。

//エリアの指定
var mainArea = $('#main-area');
//ブレークポイント
var spWidth = 640;
//ウィンドウの高さを取得
var winHeight = window.innerHeight ? window.innerHeight: $(window).height();
//ウィンドウの幅を取得
var winWidth = window.innerWidth ? window.innerWidth: $(window).width();

//初回PCサイズだった場合に高さ指定
if(winWidth > spWidth) {
	mainArea.css({'height':winHeight});
}

//ウィンドウサイズ監視
$(window).on('resize', function(){
	winWidth = window.innerWidth ? window.innerWidth: $(window).width();
	winHeight = window.innerHeight ? window.innerHeight: $(window).height();
	//ブレークポイントよりウィンドウサイズが大きい場合
	if(winWidth > spWidth) {
		mainArea.css({'height':winHeight});
	} else { //スマホ表示の時にスタイルを削除する
		if(mainArea.attr('style')) {
			mainArea.removeAttr('style');
		}
	}
});

初期表示が上手くいかない場合は、onメソッドにloadを追加してあげれば大丈夫だと思います。

$(window).on('load resize', function(){...

参考リンク

目次 を閉じる