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

完全高度元素不超过父母的身高 - CSS

3 个答案: