전체 높이 요소가 부모의 신장을 초과하지 않음 - 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)과 높이 (예 : 40px), 아마이 도움이 될 수 :

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