Как расположить два элемента div друг на друга в нижней части родительского элемента?

В этом примере я смог поместить два элемента div друг на друга в нижней части родительского элемента, но только потому что я знал высоту последнего дел. Первый был перенесен немного наверх. Что если высота #second является динамической? Как мы можем заставить их сидеть друг на друге внизу родителя с динамическими высотами? Это вообще возможно с css? Пожалуйста, не публикуйте версии JavaScript или jQuery.

css
4 голоса | спросил user2917245 8 PMpFri, 08 Apr 2016 15:09:47 +030009Friday 2016, 15:09:47

2 ответа


0

Вы можете использовать Flexbox. С помощью justify-content: flex-end вы можете переместить контент в конец элемента parent , поэтому, если вы хотите расположить другого дочернего элемента Элемент поверх родительского элемента вы можете использовать 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 8 PMpFri, 08 Apr 2016 15:16:02 +030016Friday 2016, 15:16:02
0

Вы можете обернуть их обоих в div и установить абсолютный стиль позиции для этого div, а не применять их по отдельности.

работает [Скрипка] [1]

[1]: https://jsfiddle.net/gd5pqky7/
ответил Mohammad Usman 8 PMpFri, 08 Apr 2016 15:19:45 +030019Friday 2016, 15:19:45

Похожие вопросы