【更新日 : 】
【jQuery】コンテンツの高さをウィンドウの高さと同じにする
- Category:
- jQuery
現代の実装では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(){...