Full Height Element Not Exceeding Parent's Height - CSS - css

Question

I want to create a side navigation, which should be full height of the browser window. Each menu item (DT) has additional element (DD) where I will put some filters later on. When I click a menu item, its additional element opens, and pushes all other closed items to bottom of the menu. The problem is that once it's opened the size of the parent DL exceeds the screen instead of staying full height.
Could you please suggest a solution to resolve the issue.
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

Please do remove dd.active { height: 100% } and check it...
Think this will help you.

Answer 2

The !important declaration is unnecessary. If you know the number of menu items (e.g. 2) and their height (e.g. 40px), maybe this could help:
dd.active {
height: calc(100% - 80px);
}
An alternative (and equally inelegant) solution would be to use tables. Setting the table height to 100% will automatically stretch the rows with unspecified height to fill the remaining space (so only the rows that correspond to the menu items should have their height specified).

Answer 3

My solution:
<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