将动态大小的 div 放置在另一个动态大小的 div 的底部

Question

我正在尝试创建一个将动态添加 LI 项目的 UL。

目标是当列表为空时高度为零，然后在向列表中添加项目时扩展到特定高度，并设置最大高度，以便在列表增长超过特定高度时然后所有旧项目都被溢出隐藏：隐藏。

因此，位于列表底部的最新项目应该始终可见，而较旧的项目会向上凸起并最终不可见。

通过将 UL 包装在容器 DIV 中，为 div 设置固定高度，然后，我可以获得 most将 UL 设置为 position: absolute 并将容器 div 设置为 position: relative.

但是如果我为容器设置固定高度div，那么当列表没有项目时，列表上方和下方的界面项目之间仍然有很大的空白。

为了不显得奇怪，我需要列表（及其容器 div）随着列表的增长动态调整高度，然后将增长限制在最大高度设置。

但是如果我删除容器 div 的固定高度，它会将那个 div 的高度设置为零像素，因为 UL 设置为位置：绝对，因此列表根本不显示（因为整个列表被认为在零高度内溢出 div）。

这似乎是人们尝试实现的相当普遍的事情，但我似乎找不到任何不涉及设置固定高度的解决方案。

代码示例...

HTML:

<div id="above_list">This should be touching the below_list div when the list is empty</div>
<div id="list_container">
    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
        <li>Item 4
        <li>Item 5
    </ul>
</div>
<div id="below_list">This should be touching the above_list div when the list is empty, and should get farther away from the above_list div as <li> items are added to the list

CSS:

#list_container {
    position: relative;
    max-height: 100px;
    overflow: hidden;
}

ul {
    position: absolute;
    bottom: 0;
}

在上面的代码示例中，容器 div 以零高度显示，即使列表中有一堆列表项也是如此。

我需要容器 div 仅在列表没有项目时以零高度显示。然后容器 div 应该随着项目添加到列表中而增加高度，并且如果列表超过特定高度则应该停止增长。

列表需要放置在容器底部 div，这样如果列表开始溢出超过容器 div 的最大高度，那么就不会隐藏较新的div 底部下方的列表项，它应该将较旧的列表项推到 div 顶部上方。（因此UL的顶部被视为溢出，而不是UL的底部被视为溢出。）

Answer 1

使用弹性列并将内容对齐到弹性端。

除非出于其他原因需要，否则根本不需要包装 div。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  max-height: 150px;
  overflow: hidden;
  border: 1px solid grey;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<div id="above_list">This should be touching the below_list div when the list is empty</div>
<div id="list_container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>
</div>
<div id="below_list">This should be touching the above_list div when the list is empty, and should get farther away from the above_list div as items are added to the list
</div>

没有列表项的示例：https://codepen.io/Paulie-D/pen/vYJgPEY

将动态大小的 div 放置在另一个动态大小的 div 的底部

Position a dynamically sized div at the bottom of another dynamically sized div

css

list

position