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

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

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

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

部分解决方案

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

.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查询中访问当前元素的高度来解决。

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

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

.container::before {
  content: '';
}

伪元素::before的高度为0（因为我们没有指定任何高度），所以它对用户不可见。但是，如果它有一定的高度，我们的布局（没有display: flex）将如下所示：

┌────────────────────────┐
│        ::before        │
├──────┬─────────────────┤
│      │                 │
│.inner│                 │
│      │                 │
├──────┘                 │
│                        │
└────────────────────────┘

display: flex（使其成为一个flexbox），flex-direction: column（垂直放置元素）和justify-content: space-between（元素之间的最大空间）的组合使两个元素接触两个相对的侧面：

┌────────────────────────┐
│        ::before        │
├────────────────────────┤
│                        │
├──────┐                 │
│      │                 │
│.inner│                 │
│      │                 │
└──────┴─────────────────┘

如果.container的高度没有它的子元素的高度之和高，它会首先尝试缩小它的子元素。因为::before从一开始就没有任何高度，而.inner已经适合它的内容，所以它们之间的空间将折叠为0，.inner将是clip-ped：

┌────────────────────────┐
│        ::before        │
├──────┬─────────────────┤
│      │                 │
│.inner│                 │
└──────┴─────────────────┘

试试看：

const container = document.querySelector('.container');
const input = document.querySelector('input');

input.addEventListener('input', function() {
  container.style.height = this.value + 'px';
});

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 30px 0;
  background-color: red;
  overflow: clip;
  height: 200px;
}

.container::before {
  content: '';
}

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

<input type="range" min="100" max="1000" step="1" value="200">

<div class="container">
  <div class="inner option1">
    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
    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
    maximus turpis.
  </div>
</div>

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

部分解决方案

1条答案

相关问题

热门标签

最新问答