根据div是否溢出，是否可以使用CSS将div粘贴到容器的顶部或底部？

我有一个高度为x的有限空间。在此范围内，我有一个未知和可变高度Z的div。如果可能，我想将其设置为从位置Y top:Y开始，但如果高度低于底部，则我想将其设置为固定底部并向上延伸底部：0；最大高度：X

有没有一种纯粹的CSS方法可以实现这一点，或者我必须走JS路线？

这不是什么立场：sticky应该解决的问题吗？大概是这样的：

.outer {
  height: 300px;  /* X */
  overflow: auto;
  position: relative;
}

.inner {
  position: sticky;
  bottom: 0;
  max-height: 300px;  /* X */
  overflow: auto;
  top: 30px;  /* Y */
}

<div class="container">
  <div class="spacer"></div>
  <div class="inner">
    A short bit of text.
  </div>
</div>

请参见此处的示例：

---

它在Edge/IE上不起作用，但您可以为这些浏览器使用polyfill：

这不是最优雅的解决方案，但使用flex和间隔元素应该可以做到这一点。该解决方案仅限于CSS，而且非常简单

关键的一点是，在标记中添加一个空的间隔元素，以创建顶部偏移，如下所示：

.outer {
  height: 300px;  /* X */
  overflow: auto;
  position: relative;
}

.inner {
  position: sticky;
  bottom: 0;
  max-height: 300px;  /* X */
  overflow: auto;
  top: 30px;  /* Y */
}

<div class="container">
  <div class="spacer"></div>
  <div class="inner">
    A short bit of text.
  </div>
</div>

所以。间隔棒和。内部堆叠垂直。最后，将以下CSS添加到.spacer元素：

其中，“最大高度”值是从顶部开始所需的间距

这就是它的作用：

/*.box仅用于演示目的*/ .盒子{ 显示器：flex； 证明内容：之间的空间； } .集装箱{ 显示器：flex； 弯曲方向：立柱； 弹性：1； 利润率：0.10px； 高度：300px； 边框：3个实心22222； 位置：相对位置； } .垫片{ 弹性：1； 最大高度：150像素； } .内部{ 背景色：红色； 框大小：边框框； 宽度：100%； 字体系列：Arial； 颜色：ffffff； 填充物：5px； } 一小段文字。 中等数量的文本以填充更多的行。 真的，真的，真的，真的，真的，真的，真的，真的，真的，真的，真的，真的，真的，真的很长的文本量来填充元素的整个高度，从而迫使内框向上移动。

---

我认为没有一种纯粹的css方式，即使没有JS也可能有一种天才的、也许有些复杂的方式。我的直觉告诉我，JS提供了一个直接而简单的解决方案，因为它支持CSS提供的条件，比如媒体查询，但在这种情况下，这不是一种有用的方式。请提供一个例子，这就是我一直在尝试的：如果内部div的高度小于100px，那么我希望内部div从400px开始，即不与黄色块的末端重叠