子div 100％の高さを親の高さに合わせる

Question

ここに他の同様の質問が私の特定の問題を解決することができないためです。

parentの高さに応じて常にright divが100％の高さになる必要があります。内容は内容によってはleft divになります。ここで

はhtmlです：ここでは

<div class="container clearfix"> 
<div class="left"></div> 
<div class="right"></div> 
</div> 

はCSSです：

.container{ 
    min-height: 10px; 
    width: auto; 
    height: auto; 
    background-color: #eeeeee; 
} 

.left{ 
    position: relative; 
    float: left; 
    min-height: 100px; 
    width: 50px; 
    background-color: #dddddd; 
} 

.right{ 
    min-height: 20px; 
    position: relative; 
    float: left; 
    height: 100%; 
    width: 50px; 
    background-color: #dddddd; 
} 

. 

.clearfix:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.clearfix { 
    display: inline-block; 
} 

注：
私はclearfixを使用しています。
そして、あなたはjsFiddle http://jsfiddle.net/C9Kmx/32/

Answer 1

を、それを試してみました、あなたのための唯一の解決策は、あなたのコードにいくつかのJSを実装することであると私には明らかです。しかしこれは問題ではありません。

http://jsfiddle.net/b7TuP/

Answer 2

は、右のdivのためposition:fixedとheight:100%を付けている。ここjsfiddle

にあなたの答えを表示することができます。これはあなたの問題を解決します。

Answer 3

右のdivをposition:absolute;とし、親divをposition:relative;とし、height:100%;を右のdivに使用します。それに応じてx位置と幅も調整してください。この例では、私はleft:50pxを与えて、それが左の列の右に現れることを確認しました。あなたがこのレイアウトでdisplayプロパティのtable-cell値を使用して、このようfloatを削除することができます

JSFiddlehttp://jsfiddle.net/e9mvD/

Answer 4

：

.left, .right{ 
    display:table-cell; 
} 

ライブデモ与えることによって、http://jsfiddle.net/C9Kmx/34/

Answer 5

てみてくださいコンテナの高さは固定値

これも問題を解決します。ただ、他のソリューションにご意見を読み取ることによってjsFiddle

に

http://jsfiddle.net/C9Kmx/35/

.container 
{ 
    min-height: 10px; 
    width: auto; 
    height: 100px; 
    background-color: #eeeeee; 
} 

Answer 6

あなたはフレキシボックスといくつかの創造性を使用してこれを実現することができます。

.container { 
 
    display: flex; 
 
    background: black; 
 
    padding: 5px; 
 
    width: 300px 
 
} 
 

 
.left { 
 
    height: 200px; 
 
    flex: 1 0 0px; 
 
    background: blue; 
 
} 
 

 
.right { 
 
    flex: 1 0 0px; 
 
    overflow: auto; 
 
    background: green; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 20%; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="column"> 
 
    <div class="right"></div> 
 
    </div> 
 
</div>