web-dev-qa-db-ja.com

要素の高さを別の要素の高さと一致させるにはどうすればよいですか？

現在、2つの列があり、その間に別の列があります。中央の列にコンテンツが追加されているので、左と右の列の高さを伸ばしたいのですが。

親divの正確な高さを設定できず、左右の列を「高さ：100％」に設定できないことに注意してください。これは、中央の列に含まれるコンテンツの量が少ない、または多いためです。

csshtmlheight
16
Jordan

Javascriptアプローチを実装する必要があるようです。 .legsの高さを取得して.flight_noと.priceに適用する方法です。

私が考えることができる他の唯一のオプションは、あなたの左と右の列がスタイル的に異なるが、CSSで.flightを含む背景画像をrepeat-yに与えることによって "偽造"することです。そうすれば、サイドバーは実際には同じ高さにまたがる必要はありません。

このようなjQueryを使用すると、サイドバーが中央の列の高さに動的に設定されます。

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});
21
Chords

高さを修正するためにdivを拡張するか、コンテナの高さを100％としましょう。チェーンする必要がありますheight:100%固定高さのコンテナまで、または別のボディまでheight: 100%;。長期的には、おそらくこのソリューションが必要になります。

高さが決まっていないので、height: 100%およびhtmlを本文に連結します。

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

デモ

コンテナの正確な高さをサイドバーに与えるには、固定の高さを使用するか、JavaScriptを使用する必要があります。

1
Starx