CSS-フロートの子DIVの高さを親の高さに拡張

私はページ構造を次のようにしています：

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

これで、child-leftDIVのコンテンツが増えるため、parentDIVの高さは子DIVに従って増加します。

しかし、問題はchild-right高さが増えていないことです。親と同じ高さにするにはどうすればよいですか？

以下のためparentの要素は、次のプロパティを追加します。

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

それから.child-rightこれらのために：

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

CSSの例でより詳細な結果の検索ここと同じ高さの列の詳細についてはこちらを。

この問題の一般的な解決策は、絶対配置またはクロップされた浮動小数点数を使用しますが、列が数値+サイズで変更される場合は広範囲の調整が必要であり、「メイン」列が常に最長であることを確認する必要があるという点でトリッキーです。代わりに、次の3つの堅牢なソリューションのいずれかを使用することをお勧めします。

1. display: flex：非常にシンプルで最良のソリューションであり、非常に柔軟性がありますが、IE9以前ではサポートされていません。
2. tableまたはdisplay: table：非常にシンプルで、非常に互換性があり（ほとんどすべてのブラウザー）、非常に柔軟です。
3. display: inline-block; width:50% マージンハックが負の場合：非常に単純ですが、列の下の境界線は少しトリッキーです。

1。 display:flex

これは本当にシンプルで、より複雑なレイアウトやより詳細なレイアウトに簡単に適応できます。ただし、フレックスボックスはIE10以降でのみサポートされています（他の最新のブラウザーに加えて）。

例： http : //output.jsbin.com/hetunujuma/1

関連するHTML：

<div class="parent"><div>column 1</div><div>column 2</div></div>

関連するCSS：

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexboxはより多くのオプションをサポートしていますが、列をいくつでも持つには上記で十分です！

2. <table>またはdisplay: table

これを行うためのシンプルで非常に互換性のある方法は、table- を使用することです。古いIEのサポートが必要な場合は、最初に試すことをお勧めします。あなたは列を扱っています。div + floatはそれを行うための最良の方法ではありません（cssの制限をハックするためにネストされたdivの複数のレベルが単純なテーブルを使用するよりも「セマンティック」であるということは言うまでもありません）。table要素を使用したくない場合は、CSSを検討してくださいdisplay: table（IE7以前ではサポートされていません）。

例： http : //jsfiddle.net/emn13/7FFp3/

関連するHTML：（ただし、<table>代わりにプレーンを使用することを検討してください）

<div class="parent"><div>column 1</div><div>column 2</div></div>

関連するCSS：

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

このアプローチはoverflow:hidden、フロートで使用するよりもはるかに堅牢です。ほとんどの列を追加できます。必要に応じて、自動スケーリングさせることができます。そして、あなたは古いブラウザとの互換性を保持します。floatソリューションが必要とするのとは異なり、どの列が最も長いかを事前に知る必要もありません。高さは問題なく調整できます。

KISS：特に必要がない限り、フロートハックを使用しないでください。IE7に問題がある場合でも、メンテナンスが難しく、柔軟性の低いトリックCSSソリューションよりも、セマンティック列のあるプレーンテーブルをいつでも選択します。

ちなみに、レイアウトをレスポンシブにする必要がある場合（たとえば、小さな携帯電話には列がない）、@mediaクエリを使用して小さな画面幅のプレーンブロックレイアウトにフォールバックできます。<table>これは、他のdisplay: table要素を使用するかどうかに関係なく機能します。

3. display:inline block負のマージンハックを使用します。

もう1つの方法は、を使用することdisplay:inline blockです。

例： http : //jsbin.com/ovuqes/2/edit

関連するhtml：（divタグの間にスペースがないことは重要です！）

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

関連するCSS：

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

これは少し注意が必要です。負のマージンは、列の「真の」底部が不明瞭になることを意味します。これは、によって切り取られるため、これらの列の下部を基準にして何も配置できないことを意味しますoverflow: hidden。インラインブロックに加えて、フロートでも同様の効果が得られることに注意してください。

TL; DR：IE9以前を無視できる場合はflexboxを使用します。それ以外の場合は、（css）テーブルを試してください。これらのオプションのどちらもうまくいかない場合は、マージンハックがマイナスになりますが、開発中に見落とされがちな奇妙な表示の問題が発生する可能性があり、レイアウトの制限に注意する必要があります。

親の場合：

display: flex;

子供のための：

align-items: stretch;

プレフィックスをいくつか追加する必要があります。caniuseを確認してください。

私はたくさんの答えを見つけましたが、おそらく私にとって最良の解決策は

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

ここで他のソリューションを確認できますhttp://css-tricks.com/fluid-width-equal-height-columns/

親divをoverflow: hidden
次に設定し、子div でパディングボトムに大量を設定できます。例えば
padding-bottom: 5000px
、その後margin-bottom: -5000px
、その後、すべての子のdivは、親の高さになります。
もちろん、コンテンツを親div（他のdivの外にある）に配置しようとしている場合、これは機能しません。

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

例：http : //jsfiddle.net/Tareqdhk/DAFEC/

親に身長はありますか？親の高さをそのように設定した場合。

div.parent { height: 300px };

次に、このように子供を完全な高さに伸ばすことができます。

div.child-right { height: 100% };

編集

JavaScriptを使用してこれを行う方法を次に示します。

CSSテーブルの表示はこれに最適です。

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

元の回答（どの列も高くなる可能性があると想定）：

親の高さを子供の高さに依存させ、子供の高さを親の高さに依存させようとしています。計算しません。CSS Fauxカラムが最良のソリューションです。それには複数の方法があります。JavaScriptを使用したくない。

私は最近、jQueryを使用して自分のWebサイトでこれを行いました。コードは最も高いdivの高さを計算し、他のdivを同じ高さに設定します。ここにテクニックがあります：

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

私はうまくいくとheight:100%は思わないので、divの高さを明示的に知らなければ、純粋なCSSソリューションはないと思います。

私はこれをコメントセクションに使用しました：

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

子を右から右にフロートさせることもできますが、この場合、各divの幅を正確に計算しました。

ブートストラップを知っている場合は、「flex」プロパティを使用して簡単に実行できます。必要なのは、CSSプロパティの下で親divに渡すことだけです。

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

.homepageSection私の親divはどこにありますか。次に、htmlに子divを追加します

<div class="abc col-md-6">
<div class="abc col-md-6">

ここで、abcは私の子divです。子divにボーダーを与えるだけで、ボーダーに関係なく両方の子divの高さの同等性を確認できます

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

アイデアを与えるためだけにインラインスタイルを使用しました。

私はインターンシップのインタビューでこのきちんとしたトリックを知りました。元の質問は、3つの列の上部の各コンポーネントの高さを、利用可能なすべてのコンテンツを表示する同じ高さにする方法です。基本的に、可能な最大の高さをレンダリングする非表示の子コンポーネントを作成します。

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>