将 HTML 元素粘贴到容器底部，而不剪掉其顶部

Question

我遇到的情况是，我有一个容器div元素，并且该容器内有一个内部元素（在本例中为图片）。我希望发生以下情况：

• 如果容器 div 比内部元素高，则内部元素应放置在容器的底部。
• 如果容器 div 小于内部元素，则应将其放置在容器的顶部，并剪裁底部。

我遇到的主要困难是内部元素的高度是可变的。理想情况下，我希望有一个仅 CSS 的解决方案（当然，如果使用 JavaScript 会更容易）。

部分解决方案

在内部元素高度已知且固定的情况下，我已设法通过以下方式获得所需的结果（CodePen 链接）：

.container {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: red;
  overflow: clip;
  height: 100vh;
  position: relative;
  container-type: size;
}

.inner {
  background-image: linear-gradient(green, yellow);
  height: 400px;
  width: 200px;
}

.option1 {
  position: absolute;
  @container (max-height: 400px) {
    top: 0;
  }
  @container (min-height: 400px) {
    bottom: 0;
  }
}

<div class="container">
  <div class="inner">
  </div>
</div>

我不知道这是否可以为任何解决方案提供有用的起点。通过访问查询中当前元素的高度可以很容易地解决这个问题@container。

Answer 1

只需使用伪元素并设置flex-direction: column为.container：

\n

.container {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: clip;\n}\n\n.container::before {\n  content: \'\';\n}\n

\n

伪元素的::before高度为 0（因为我们没有指定任何高度），因此用户看不到它。然而，如果它有一定的高度，我们的布局（没有display: flex）将如下所示：

\n

\xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90\n\xe2\x94\x82        ::before        \xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xac\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xa4\n\xe2\x94\x82      \xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x82.inner\xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x82      \xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98                 \xe2\x94\x82\n\xe2\x94\x82                        \xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n

\n

display: flex（使其成为弹性盒）、flex-direction: column（垂直放置元素）和（元素之间的最大空间）的组合justify-content: space-between使两个元素接触两个相对的边：

\n

\xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90\n\xe2\x94\x82        ::before        \xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xa4\n\xe2\x94\x82                        \xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90                 \xe2\x94\x82\n\xe2\x94\x82      \xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x82.inner\xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x82      \xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xb4\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n

\n

如果.container没有它的孩子们的高度总和那么高，它会首先尝试缩小它的孩子们。由于::before一开始就没有任何高度，并且.inner已经适合其内容，因此它们之间的空间折叠为 0 并将.inner被clip-ped：

\n

\xe2\x94\x8c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x90\n\xe2\x94\x82        ::before        \xe2\x94\x82\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xac\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xa4\n\xe2\x94\x82      \xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x82.inner\xe2\x94\x82                 \xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\xb4\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x98\n

\n

尝试一下：

\n

\r\n

\r\n

const container = document.querySelector(\'.container\');\nconst input = document.querySelector(\'input\');\n\ninput.addEventListener(\'input\', function() {\n  container.style.height = this.value + \'px\';\n});

\r\n

.container {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin: 30px 0;\n  background-color: red;\n  overflow: clip;\n  height: 200px;\n}\n\n.container::before {\n  content: \'\';\n}\n\n.inner {\n  background-image: linear-gradient(green, yellow);\n  width: 200px;\n}

\r\n

<input type="range" min="100" max="1000" step="1" value="200">\n\n<div class="container">\n  <div class="inner option1">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum purus nec interdum tristique. Maecenas eleifend, libero nec varius cursus, lacus eros elementum odio, eget convallis risus erat ut velit. Pellentesque ut ex lobortis, hendrerit ipsum\n    ut, pretium dui. Morbi porta viverra eros eget malesuada. Praesent sed metus eu dui fermentum sagittis. Aliquam blandit ultricies hendrerit. Integer dignissim enim est, id vestibulum ante ultricies eu. Cras at est quis sem luctus finibus. Mauris in\n    maximus turpis.\n  </div>\n</div>

\r\n

\r\n

\r\n

\n