• RSS

[JS]jQuery で高さの異なる要素を最大値で揃える方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

float に横並びにした要素の高さを最大値で揃えるためには、以前に紹介させていただいたCSS を使う方法 以外にも、jQuery で対応することが可能ですので紹介させていただきます。

jQuery で高さの異なる要素を最大値で揃える

今回、float で横並びにする要素は#sidebar と #contents です。

HTML の記述例

まずはHTML 側の記述はこんな感じとします。


CSS の記述例

続いてCSS の記述例です。
#sidebar にfloat:left、#contents にfloat:right をそれぞれ指定しています。


Javascript の記述例

最後にJavascript ですが、<head>タグ内にjquery ファイルと一緒に以下の記述を追加します。

$(window).resize…以降で、ウィンドウの高さが変わった(リサイズ)した場合に高さを取得す処理も入れます。


jQuery で高さの異なる要素を最大値で揃えるデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください