Как выровнять по вертикали нижний колонтитул внутри карточки с одинаковой высотой, но гибкой частью тела с помощью flexbox

Я сделал этот минимальный сценарий: https://jsfiddle.net/frp61gh7/

HTML:

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
    some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
    <p>
    this is some kind of footer that should always stick to the bottom
</p>
    </div>
  </div>
  <div class="card">x5...etc</div>
</div>

CSS:

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
}
.footer{
  border: 1px solid red;
}
p{
  flex-grow: 1;
}

где у меня есть 6 карточек, которые текут в контейнере flexbox так, как я хочу. (синяя рамка) Карты одинаковой высоты и текут так, как я хочу. Высота карт в ряду может варьироваться в зависимости от самой верхней карты в этом ряду. В реальном сценарии это работает.

Однако тело каждой карточки может быть высоким или низким в зависимости от его содержимого (например, в реальном сценарии ширина изображения продукта фиксирована, а высота может изменяться). Теперь вопрос / проблема: поскольку тело гибкое по высоте, я не могу поместить нижний колонтитул (красную границу) в нижнюю внутреннюю часть карточки. position: absolute - это не вариант, потому что я пробовал это, и это запуталось с гибким телом.

Любой совет?


vertical-alignment html css flexbox sticky-footer
person Vasili Paspalas    schedule 30.03.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Сделайте карточки гибкими контейнерами и задайте направление столбца, а затем задайте нижний колонтитул margin-top:auto.

Это подталкивает нижний колонтитул к нижней части каждого столбца.

.row {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
}

.card {
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  display:flex;
  flex-direction: column;
}

.footer {
  border: 1px solid red;
  margin-top: auto;
}

p {
  flex-grow: 1;
}
<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
</div>

person Paulie_D    schedule 30.03.2020

arrow_upward
0
arrow_downward

Кроме того

Я нашел хакерский способ решения вещей, пока нет лучшего ответа. Может помочь другим и / или дать представление о том, как я хочу, чтобы конечный результат выглядел так:

В моем собственном решении я добавил заполнитель (да, возвращаясь к реликтовым методам) с той же высотой, что и нижний колонтитул ..

ключ к разгадке: https://jsfiddle.net/qfo42nh8/

CSS:

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.placeholder{
  height: 100px;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  position: relative;
}
.footer{
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  height: 100px;
}

html:

<div class="row">
 <div class="card">
    <h2>card</h2>
    <p>
    piece of body that needs flexible height..
    </p>
    <div class="placeholder">
    </div>
    <div class="footer">
    <p>
    footer content
</p>
    </div>
  </div> <!-- x 5 extra..you get the idea -->
</div>
person Vasili Paspalas    schedule 30.03.2020