子供のdivを作る最大の高さ

Question

私は.box-contentdivはボックスA/boxB divの中に残っている最大の高さを取るようにしようとしています。私はdiv.box-headerと.box-contentをboxA/boxB divに入れました。 .box-contentは.box-headerでdivを共有しています。

このJSFiddleには、.box-contentが親のdivの外にあることがわかります。私はこれらの2つのルールを持つアカウントに取って、純粋なCSSでこれを解決するにはどうすればよい

：

1. .box-contentの高さが伸縮可能である（ たびウィンドウサイズの変更を縮小/成長）。
2. .box-contentの最小高さは200pxです。

   .box-contentはその親を100％に設定されているだけでなく、そう.box-contentが押下された親の中にあると（のサイズをオーバーフローしてい.box-headerがあります：

Answer 1

overflowは（私はここであなたの人生が容易になります感じる）オプションがある場合は、ここに

下記のお CSS（2ラインの変更）、 demo

維持HTMLと同じです

.boxA { 
    width: 220px; 
    padding: 0px 3px 5px 5px; 
    float: left; 
    height: 100%; 
    margin-bottom: 0px; 
    border: solid 1px green; 
    overflow:hidden; /*added this*/ 
} 

.boxB { 
    width: 420px; 
    padding: 0px 5px 5px 3px; 
    float: right; 
    height: 100%; 
    border: solid 1px red; 
    overflow:hidden;/*added this*/ 
} 

Answer 2

あなたが直面している問題があります.box-content）を使用して親の高さを100％維持します。

私はこのCSSを提案することができます：

.box-content { height: 90%; } 

.box-header { 
    position: relative; 
    background-color: green; 
    padding:11px 8px 5px; 
    color: white; 
    height:10%; 
} 

このFIDDLE

Answer 3

あなたは子供のdiv要素が大きく、高さを持っていることをイベントでスクロールする親divを設定することができます参照してください。

.boxA{ overflow:auto; } .boxB{ overflow:auto; }