css - 全高元素不超过父元素的高度 - 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% } 并检查它...

认为这会对您有所帮助。