親の高さを超えていない完全な高さの要素 - CSS

Question

サイドナビゲーションを作成したいですが、これはブラウザウィンドウの高さでなければなりません。各メニュー項目（DT）には、後でいくつかのフィルタを追加する追加要素（DD）があります。メニュー項目をクリックすると、その追加要素が開き、他の閉じた項目はすべてメニューの一番下にプッシュされます。問題は、いったんオープンすると、親DLのサイズが完全な高さに留まる代わりに画面を超えてしまうことです。

問題を解決するための解決策をご提案ください。

HTML

<dl> 
    <dt>Item</dt> 
    <dd class="active">Filters</dd> 
    <dt>Item</dt> 
    <dd>Filters</dd> 
</dl> 

CSS

body, html{ 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
dl{ 
    display: block; 
    margin: 0; 
    width: 200px; 
    background: grey; 
    height: 100% !important; 
} 
dt{ 
    background: #ccc; 
    padding: 5px 10px; 
} 
dd{ 
    display: none; 
    margin: 10px; 
} 
dd.active{ 
    display: block; 
    height: 100%; 
} 

JSFIDDLE

Answer 1

dd.active { height: 100% }を削除し、それを確認してください...

が、これはあなたを助けると思います。

Answer 2

!important宣言は不要です。あなたがメニュー項目の数を知っている場合（例えば2）及びそれらの高さ（例えば40ピクセル）、多分これは助けることができる：

dd.active { 
    height: calc(100% - 80px); 
} 

代替（と同じように洗練）ソリューションは、テーブルを使用することです。テーブルの高さを100％に設定すると、指定されていない高さの行が自動的に残りのスペースを埋めるようにストレッチされます（メニュー項目に対応する行のみが高さが指定されます）。

Answer 3

私のソリューション：

<dl> 
    <dt>Item</dt> 
    <dd class="active">Filters</dd> 
    <dt>Item</dt> 
    <dd>Filters</dd> 
</dl> 

body, html{ 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
dl{ 
    display: table; /*changed*/ 
    margin: 0; 
    width: 200px; 
    background: grey; 
    height: 100% !important; 
} 
dt{ 
    background: #ccc; 
    padding: 5px 10px; 
} 
dd{ 
    display: none; 
    margin: 10px; 
} 
dd.active{ 
    display: table-row; /*changed*/ 
    height: 100%; 
} 

UPDATED JSFIDDLE