親コンテナの高さが固定され、親コンテナに展開/制限される子

Question

多くの親コンテナがあります。これは多くの場合、ページ上にあります。 高さが異なります。

これはdiv要素の階層です：

.parent_container 
    |-----> .title 
    |-----> .content 

.parent_containerフィックス高さ .TITLEは、私は高さの残りの部分を取るために.contentたい高さ の一部を占めていません... .titleで占められています。

どうすればいいですか？

現在のところ、親コンテナの高さが異なるため、.titleは常にH2スタイルで指定された特定の高さであるため、90％は常にうまく機能しません。

「コンテンツの高さ= parent_height - タイトルの高さ」と言う方法はありますか？

/*just an example...different parent_containers have diff heights)*/ 
    .parent_container{ 
    height:530px; 
    } 

    .content { 
    height:90%; /* to make room for title */ 
    overflow:auto; /*show scrollbars*/ 
    } 

Answer 1

この場合、動作させる方法はありますが、HTMLとCSSを調整する必要があります。

HTMLの変更：

.parent_container 
|-----> .content 
    |-----> .title 
    |-----> .scroll_container 

タイトルは、コンテンツ内部に入ります。 .contentがそれらのスタイルに影響を及ぼす場合は、.title内のいくつかのスタイルをオーバーライドする必要があります。

次に、コンテンツの高さを100％に設定します。スタイリングに応じてCSSを.titleと.contentで調整して動作させる必要があるかもしれませんが、実行可能にする必要があります。 .content_scrollerにoverflow: autoを入れて、この同じスタイルを.contentコンテナから削除したいと思うでしょう。 .content_scrollerは必要に応じてコンテンツをスクロールし、.contentコンテナは.parent_containerの高さの100％になります。

Answer 2

現在のところ、cssで計算する方法はありませんが、calc（）は動作しています。しかし、CSSで計算を行うことは悪夢ではないという大きな議論があります。それは話題にはなりません。

1つの簡単な修正は、 .content内に.title を入れ、コンテンツの高さを100％にすることです。何かを計算する必要がありません。

オプション2は、javascriptを使用してこれを計算することです。