[解決済み] [Solved] フロートされた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>

前の回答は、あなたの目標に対してあまりにも間違った仮定に基づいていたため、削除しました。