web-dev-qa-db-ja.com

CSS - floatの子DIVの高さを親の高さに拡張する

私はページ構造を持っています：

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

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

さて、child-left DIVはより多くのコンテンツを持つようになるでしょう、それでparent DIVの高さは子供DIVによって増加します。

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

htmlcsslayout
404
Veera

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の例 here および等高さの列 here についての詳細な結果を見つける。

416
Sotiris

この問題の一般的な解決策は絶対配置またはトリミングされたフロートを使用しますが、列の数とサイズが変更された場合は大幅な調整が必要であり、「メイン」列が常に最も長いことを確認する必要があるという点で注意が必要です代わりに、次の3つの堅牢なソリューションのいずれかを使用することをお勧めします。

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

1. display:flex

これは本当にシンプルで、より複雑なレイアウトやより詳細なレイアウトに簡単に適応できますが、flexboxは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のサポートが必要な場合は、まず試してみることをお勧めします。列を扱っています。 divs + floatsは、それを行うための最善の方法ではありません（cssの制限を回避するために複数レベルのネストされたdivsが、単純なテーブルを使用するよりも「セマンティック」ではないことは言うまでもありません）。 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を使用するよりもはるかに堅牢です。ほぼ任意の数の列を追加できます。必要に応じてauto-scaleを使用できます。古代のブラウザとの互換性を保持します。フロートソリューションが必要とするのとは異なり、どの列が最も長いかを事前にを知る必要もありません。高さは問題ありません。

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

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

3. display:inline block負のマージンハック。

別の方法は、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）テーブルを試してください。これらのオプションのどちらもうまくいかない場合、マイナスのマージンハックがありますが、これらは開発中に見落としやすい奇妙な表示の問題を引き起こす可能性があり、注意する必要があるレイアウトの制限があります。

187
Eamon Nerbonne

親のために：

display: flex;

子供のための：

align-items: stretch;

あなたはいくつかの接頭辞を追加するべきです、caniuseをチェックしてください。

19
Aiphee

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

.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/ /

18
Dobromir Minchev

親divをoverflow: hiddenに設定してください
それから子供divであなたはpadding-bottomのために大量を設定することができます。例えば
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/

11
Tareq

親は身長がありますか？親の身長をそのように設定すれば。

div.parent { height: 300px };

そうすれば、子供をこのように全高に伸ばすことができます。

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

_編集_

これはJavaScriptを使ったやり方です。

8
Olical

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フェイクコラムが最善の解決策です。それには複数の方法があります。私はJavaScriptを使用したくないです。

5
Salman A

私はこれをコメント欄に使った。

.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の幅を正確に計算しました。

4
larsgrafik

私は最近jQueryを使って私のウェブサイトでこれをしました。このコードは、最も高いdivの高さを計算し、他のdivを同じ高さに設定します。これがテクニックです。

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

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

4
ajcw

あなたがブートストラップを知っているなら、あなたは 'flex'プロパティを使うことによってそれを簡単にすることができます。あなたがする必要があるすべては親divにcssプロパティの下に渡すことです

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

.homepageSectionは私の親divです。今度はhtmlにchild divを追加します。

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

abcは私の子divです。子divにボーダーを付けるだけで、ボーダーに関係なく両方の子divで身長の平等をチェックできます

3
Er.Naved Ali
<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>

アイデアを出すためだけにインラインスタイルを使用しました。

0
suketup