div要素の高さheightをウィンドウサイズのリサイズ高さに自動的に合わせる方法

web制作

読了の目安時間: 148

cssだと、div要素の横幅widthは%で自動的に調整してくれるのに、高さだけは中身の要素が高さを持っていたり、そもそものdiv要素自体にheightの値がないと調整してくれません。

min-heightなどで、最低の高さを与えておくなど、色々と工夫はあると思うのですが、できれば、ウィンドウサイズに合わせて動的に調整したいことかと思います。

なので、div要素に対して、高さを自動的に持たせたい時はjs、jqueryに頼る必要があります。

div要素の高さheightをウィンドウサイズのリサイズ高さに自動的に合わせる

というわけで、ソースコードは下記の通り。

コメントに書いている通りですが、ウィンドウ高さを取得して、それを対象のdiv要素の高さにすればOKというだけのことです。

一点、上記の書き方だと、ウィンドウリサイズ時にずっと動作してしまいますので、ウィンドウリサイズが終了したところでウィンドウ高さを取得させたい場合には、setTimeout関数を利用してください。

setTimeout関数を用いたイベントハンドラの記述方法は、下記サイト様で詳細に分かりやすく説明されていますので、ぜひ参考にしてみてください。

▼[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する
https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html

IEとEdgeには要注意!

divだと大丈夫だと思うのですが、画像やvideoなどをwidth:100%;にして、上記の方法で縦幅自動化しようとすると、IEとEdgeは縦幅に合わせて、横幅を縮めてしまいます。(width:100%;より、heightの値を優先してしまう様子。)

なので、画像やvideoなどを常に全画面に表示させたい時などは、もう少し工夫が必要になりますので、要注意です。

最後に一言

js、jqueryで何かしたい時は、イベントハンドラ探して、対象のオブジェクト調べて、なんかすれば、きっとなんとかなります・・・!(超アバウト・・・!)

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

div要素の高さheightをウィンドウサイズのリサイズ高さに自動的に合わせる方法


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

follow us in feedly

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。PVは月間10万程度です。普段はWEB制作をやっています。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。