スキップしてメイン コンテンツに移動

投稿

5月, 2014の投稿を表示しています

HTMLの要素を下揃えする方法

【実現したいこと】 上の図において、要素1と要素2の下面を揃えたい。


【よく見る方法は...】 ・親要素に「position:relative;」
・子要素に「position:absolute;」、「bottom:0;」
とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript(jQuery)で実現する方法を記載します。


【JavaScriptでの実現方法(考え方)】
上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。

「D」=「A」-「B」-「C」

この「D」を要素2の「margin-top」に追加してあげます。

今回は、レスポンシブ(RWD)に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。


【実装】 jQuery(document).ready(function() {   adjustPosition();     $(window).resize(function () {     adjustPosition();   });   function adjustPosition(){       var heightA = $("要素1").outerHeight();       var heightB = $("テキスト部").outerHeight();       var heightC = $("要素2").outerHeight();       var heightD = heightA - heightB - heightC;       if (heightD > 0) {         $("#要素2").css("margin-top", heightD + "px");       }   } });

【解説】 特に難しいことはしていませんが、初回とウィンドウリサイズ時に、それぞれの要素の高さを取得して(outerHeightは、padding, bord…