Question

我已经制作了一个附加到文本输入的下拉列表，下面显示的列表有一个页眉和页脚行，并在其间滚动内容。 JS在这里小提琴：

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

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

为：

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

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

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

Answer 1

请看这个小提琴：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中删除了一些现在不必要的属性，并在上面和小提琴中进行了更新。这至少应该让你离开地面。

祝你的项目好运！：）

Answer 2

我清理了你的CSS。不知道你为什么使用显示表和设置高度等。只需隐藏父溢出并设置子溢出滚动，这应该这样做。

此外，我将边框移动到外部容器，因此它不会被切断。

is_visible = false;


function Toggle() {
	is_visible = !is_visible;
  
  document.getElementById("dropdown").style.display = (is_visible ? "block" : "none");
}

DIV.wrapper {
  display: inline-block;
  position: relative;
}

DIV.dropdown {
  display: none;
    position: absolute;
    clear: left;
    left: 0;
    right: 0;
    height: 100px;
    border-bottom: 1px solid black;
    overflow: scroll;
}

DIV.list_container {
      display: block;
    border: 1px solid black;
    border-bottom: 0px;
  
}

DIV.header,DIV.footer {
  display: block;
  background-color: lightgray;
}

DIV.scroll_outer {
  display: block;

  position: relative;
  background-color: white;
}

DIV.scroll_inner {
 overflow: hidden;
}

<div class="wrapper">
  <input type="text" size="50" value="Click me" onclick="Toggle()" />
  <div class="dropdown" id="dropdown">
    <div class="list_container">
      <div class="header">Header</div>
      <div class="scroll_outer">
        <div class="scroll_inner">
        Item 1<br />
        Item 2<br />
        Item 3<br />
        Item 4<br />
        Item 5<br />
        Item 6<br />
        Item 7
        </div>
      </div>
      <div class="footer">Footer</div>
    </div>
  </div>
</div>

Answer 3

height: auto;
max-height: 100px;
overflow: auto;

最大高度未扩展的DIV

3 个答案: