8月更新・前月(7月)の人気記事トップ10 08/02/2022
- ( 01 – ) 【Mac】MacにGoogle Driveをインストール
- ( 04 ↑) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 02 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
- ( 04 – ) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 06 ↑) 【jQuery】入門5. jQueryで日時を表示
- (圏外↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- (圏外↑) 【Guide】画面解像度一覧表
- (圏外↑) 【Mac】Time Machineの初回バックアップ完了を待機中でバックアップが終わらない場合はこれで解決!
- (10↑) 【Labs】クリックしやすいラジオボタンとチェックボックス
- (圏外↑) 【Inkscape】InkscapeでCMYKカラーを表示する
【Labs】表示しているブラウザの高さを取得してCSSのheightに指定
こんにちは(・∀・)
今日は4年に一度の2月29日ですが、いかがお過ごしでしょうか。もうすぐオリンピックです、楽しみですね。
さて、本題に戻りますが、画面の表示サイズにあわせて横幅や高さを指定したい時があると思います。横幅はwidth:100%でいいのですが、高さはデバイスの画面解像度やブラウザの表示サイズによって変わってくることがあります。通常は特に問題ないのですが、異なる画面サイズでもパララックスなど一つのセクションを画面にピッタリ表示したい場合はどうしたらよいのか...
JavaScriptネイティブ版はこちら【Labs】表示しているブラウザの高さを取得してCSSのheightに指定2です。
CSSで高さ100%を指定する方法はこちらの【Labs】CSSで要素の高さ100%を指定する方法をご覧ください。
jQueryで取得した高さをCSSのheightに指定
jQueryで表示画面サイズを取得してCSSのheightに取得した高さを指定します。
JavaScript
$(window).load(function() {
//画面高さ取得
h = $(window).height();
$('#container').css('min-height', h + 'px');
});
$(window).resize(function() {
//画面リサイズ時の高さ取得
h = $(window).height();
$('#container').css('min-height', h + 'px');
});
このとき、CSSへの指定はheightにではなくmin-heightに指定するのがポイントです。そうすることでコンテンツ量が画面サイズより大きい場合、コンテンツの長さに応じた高さを表示してくれます。
その他、高さを指定したい要素のCSSをheight:100%にする方法もあります。この場合その要素の親要素の高さも100%にする必要があります。以前フルフラッシュサイトなどでSWFファイルを表示するときに使った手法なのでお馴染みだと思います。
他にもCSSの単位でvw、vh、vmin、vmaxなどがあり、それらを使ってCSSの高さを指定することもできます。「1vh = 1%」で、height: 100vh → height: 100%となります。こちらは%と違い親要素の高さと紐づけられることはありません。IEは9以上の対応となります。
サンプルデモ
Result
スマホでのご確認はこちらをどうぞ
vw | viewport width | viewportの幅の割合 |
vh | viewport height | viewportの高さの割合 |
vmin | viewport minimum | viewportの幅と高さの値が小さい方の割合 |
vmax | viewport max | viewportの幅と高さの値が大きい方の割合 |
関連リンク
【Labs】表示しているブラウザの高さを取得してCSSのheightに指定2
【Labs】CSSで要素の高さ100%を指定する方法