フローティングdivを親の100％の高さにするにはどうすればよいですか？

HTMLは次のとおりです。

<div id="outer">
    <div id="inner"></div>
    Test
</div>

そしてここにCSSがあります：

#inner {
  float: left;
  height: 100%;
}

Chromeデベロッパーツールで検査すると、内側のdivの高さが0pxになっています。

親divの高さの100％に強制するにはどうすればよいですか？

以下のために#outerその内容に基づいて、そして持っているべき高さ#innerその上のベースの高さを、絶対位置の両方の要素を作ります。

詳細はのための仕様で見つけることができますCSSのheightプロパティが、基本的に、#inner無視しなければならない#outer場合には、高さを#outerの高さがあるauto、ない限り、 #outer絶対に配置されています。それ自体が絶対的に配置されない限り#inner、高さは0になります。 #inner

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

ただし... #inner絶対配置floatすると、設定は無視されるため、#inner明示的に幅を選択し、必要に応じて#outerテキストの折り返しを偽装するためにパディングを追加する必要があります。たとえば、以下のパディング#outerは幅#inner+3です。便利なことに（全体のポイントは#inner高さを100％にすることでした）#inner、下にテキストを折り返す必要がないため、#innerフロートしたように見えます。

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

以前の答えはあなたの目標についてのあまりにも多くの誤った仮定に基づいていたので、私はそれを削除しました。

親の場合：

display: flex;

いくつかのプレフィックスを追加する必要がありますhttp://css-tricks.com/using-flexbox/

編集：欠点はいつものようにIEだけですが、IE9はflexをサポートしていません。 http://caniuse.com/flexbox

編集2：@toddsbyが指摘したように、項目の整列は親のためのものであり、そのデフォルト値は実際にはストレッチです。子に別の値が必要な場合は、align-selfプロパティがあります。

編集3：jsFiddle：https ://jsfiddle.net/bv71tms5/2/

実際には、親要素が配置されている限り、子の高さを100％に設定できます。つまり、親を絶対的な位置に配置したくない場合。さらに説明させてください：

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>

IE8より前のバージョンのInternet Explorerをサポートする必要がない限り、これを使用display: table-cellしてこれを実現できます。

HTML：

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS：

.inner {
    display: table-cell;
}

これにより、.innerクラスを持つ各要素が親要素の高さ全体を占めるようになります。

あなたの問題を解決する例を作りました。

ラッパーを作成し、フロートさせてから、divの絶対位置を指定し、100％の高さにする必要があります。

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS：

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

説明： .right divは絶対位置にあります。つまり、その幅と高さ、および上と左の位置は、CSSで幅または高さのプロパティが明示的に宣言されている場合にのみ、絶対的または相対的に配置された最初の親divに基づいて計算されます。明示的に宣言されていない場合、これらのプロパティは親コンテナ（.right-wrapper）に基づいて計算されます。

したがって、DIVの100％の高さは.containerの最終的な高さに基づいて計算され、.rightの位置の最終的な位置は親コンテナーに基づいて計算されます。

ここではそれを達成するためのより簡単な方法です：

1. 3つの要素のコンテナー（#outer）表示を設定します。
2. 要素自体を設定します（#inner）表示：テーブルセル
3. フローティングを取り外します。
4. 成功。

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

@Itay in Floated divのおかげで、高さ100％

少しjQueryを使用する準備ができている場合、答えは簡単です！

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

これは、単一の要素を親の高さ100％の側にフローティングする場合にうまく機能しますが、通常は回り込む他のフローティング要素は片側に保持されます。

これが仲間のjQueryファンに役立つことを願っています。

これは、高さが等しいグリッドシステムのコードサンプルです。

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

上記は、外側のdivのCSSです。

#inner{
width: 20%;
float: left;
border: 1px solid;
}

上は内側のdivです

これがあなたを助けることを願っています

これは私を助けました。

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

適切な#inner幅を設定するには、right：およびleft：を変更します。

同じ高さの複数の子要素が必要な場合の同様のケースは、フレックスボックスで解決できます。

https://css-tricks.com/using-flexbox/

display: flex;親flex: 1;要素と子要素に設定すると、すべて同じ高さになります。

試す

#outer{overflow: auto;}

より多くのオプションを表示： フローティングエレメントの親が折りたたまれないようにするにはどうすればよいですか？