divのダイナミックな高さ割り当て

Question

私は75％の高さの外側divを持っています。私は内部スクロール可能div Aと内部スクロール可能div Bを持っています。 div Bは動的に削除することができ、max-heightの可変高さです。 私は純粋なCSSのアプローチ

を探しています自動的のdiv B.

#outer { 
    position: fixed; 
    bottom: 0; 
    left: 100px; 
    height: 500px; 
    width: 350px; 
    background-color: gray; 
} 

#header { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 44px; 
    background-color: blue; 
    color: white; 
} 

#footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 44px; 
    background-color: red; 
    color: white; 
} 

#content { 
    position: absolute; 
    top: 44px; 
    overflow-y: scroll; 
    padding: 20px; 
    height: 200px; 
} 

#dynamic-content { 
    max-height: 150px; 
    overflow-y: scroll; 
    padding: 10px; 
    position: absolute; 
    bottom: 44px; 
} 

に基づいて、その高さを調整するDIV AはここでjsFiddleうとしますhttps://jsfiddle.net/6tr081hb/

Answer 1

私はflexコンテナを作成しますこの方法では、flexプロパティを1に設定することで、ダイナミックコンテンツの固定高さとコンテンツの調整可能な高さを設定できます。

jsfiddleを確認してください。

また、コンテンツの絶対的な配置を削除し、をouter divに追加しました。