html - 最大高度不扩展的 DIV

Question

我制作了一个附加到文本输入的下拉列表，出现在下方的列表具有页眉和页脚行，以及介于两者之间的滚动内容。 JS fiddle 在这里:

https://jsfiddle.net/tpgjjh81/3/

效果很好，除了我希望下拉菜单具有灵活的高度，具体取决于其内容，最高可达指定的最大高度。但是，如果我改变:

DIV.dropdown {
    ...
    height: 100px;
    ...
}

到:

DIV.dropdown {
    ...
    max-height: 100px;
    ...
}

...那么当下拉列表出现时，列表的“内容”部分根本不显示，只显示页眉和页脚行。内部的 DIV 具有 height: 100%，所以我本以为这些会将外部 DIV 推到其最大高度，但它似乎不起作用？

编辑:我也试过在 max-height 旁边添加 height: auto 但它没有任何效果。

Answer 1

在这里查看这个 fiddle :https://jsfiddle.net/tpgjjh81/22/

主要问题是 DIV.scroll_inner 具有 absolute 定位和 0 边缘(以填充 scroll_outer 容器)。

让外部容器控制自己的内容，并将内部内容的高度限制为max-height: 100px。

本质上，您正在寻找的是这样的东西:

DIV.wrapper {
  display: inline-block;
  position: relative;
}

DIV.dropdown {
  display: none;
  position: absolute;
  clear: left;
  left: 0;
  right: 0;
  border: 1px solid black;
}

DIV.list_container {
  display: table;
  width: 100%;
  height: 100%;
}

DIV.header,DIV.footer {
  display: table-row;
  background-color: lightgray;
}

DIV.scroll_outer {
  display: table-row;
  height: auto;
  background-color: white;
}

DIV.scroll_inner {
   overflow: auto;
   max-height: 100px;
}

编辑 我还从 CSS 中删除了一些现在不需要的属性，并在上面和 fiddle 中更新了它。这至少应该让你离开地面。

祝你的元素好运! :)