css - 別の要素の高さに合わせて要素の高さを設定する方法は?

Question

現在、2 つの列があり、その間に別の列があります。私が望むのは、中央の列にコンテンツが追加されているため、左右の列の高さを拡張することです。

注意すべきことは、親 div の正確な高さを設定できず、左右の列を「高さ: 100%」に設定できないことです。これは、中央の列に少量のコンテンツしかないか、または多くのコンテンツしかない可能性があるためです。

score 26 · Accepted Answer

Javascript アプローチを実装する必要があるようです。私がそれを行う方法は、の高さを取得し、.legsそれを.flight_noおよびに適用すること.priceです。

私が考えることができる他の唯一のオプションは、CSS で.flight左と右の列がスタイル的に異なりますが、背景画像を指定して「偽造」することです。repeat-yこれを行うと、サイドバーは実際には同じ高さにまたがる必要がなくなります。

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

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

編集：

時代は変わりました -- jQuery はかつてのようなジャガーノートではありません。私たちは Flexbox を世界に歓迎しました。列ベースのソリューションについては、この SO ページを参照してください。

score 1 · Accepted Answer

div を正しい高さに拡張する、またはコンテナーの 100% の高さとしましょう。height:100%固定の高さのコンテナーまたは別のheight: 100%;. 長期的には、おそらくこのソリューションが必要になるでしょう。

固定の高さがないのでheight: 100%、html を使用して body までチェーンしました。

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

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

2 に答える 2