如何将两个div叠放在父元素底部？

Question

在这个例子中，我能够将两个div放置在它们的父元素底部，但这是因为我知道最后一个div的高度。第一个div被向上移动了一点。如果#second的高度是动态的呢？我们如何使它们以动态高度位于父元素底部？使用CSS是否可行？请不要发布JavaScript或jQuery版本。

- user2917245

Answer 1

您可以使用 Flexbox。通过 justify-content: flex-end，您可以将内容移动到父元素的末尾，因此如果您想要将其他某个子元素定位在父元素上方，则可以使用 margin-bottom: auto。这适用于在父元素上设置了 flex-direction: column 的情况。

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.main {
  margin-bottom: auto;
  border: 1px solid black;
}
.box {
  background: lightblue;
  margin: 5px;
}

<div class="content">
  <div class="main">Lorem ipsum dolor.</div>
  <div class="box">One</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati vel molestiae dolores, ad, nulla harum tenetur minima aperiam debitis id atque fugit, modi error et magni eius repellendus saepe. Vero?</div>
</div>

- Nenad Vracar

---

看起来像是一种 CSS hack。我以前从未见过这样的 CSS，但我很喜欢它。感谢您的教训和回答。 - user2917245

不用谢。这不是黑客行为，你可以在这里阅读更多信息：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes - Nenad Vracar

Answer 2

你可以将它们都包裹在一个 div 中，并为该 div 设置绝对定位样式，而不是单独应用它们。

在 [Fiddle][1] 上查看演示。

[1]: https://jsfiddle.net/gd5pqky7/

- Mohammad Usman

---

只是在想为什么我没有想到那个。一定是星期五了...但我更喜欢Nenad Vracar的hacky答案 :> 谢谢帮助！ - user2917245

@ksno 非常欢迎 :) - Mohammad Usman