Как сделать контент дива адаптивным по высоте?

Question

[tvsjke]

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

Есть слайдер с контентом:

prntscr.com/cz7fh0

<div class="goods-img">
  <a href="" class="img-link">
    <img src="/image/<?= $slide['image'] ?>" style='height: 100%; width: 100%; object-fit: contain'/>
  </a>
</div>
<div class="goods-content">
  <h3><?php echo $slide['title'];?></h3>
  <p><?php echo $slide['text'];?></p>
  <a href="<?php echo $slide['link'];?>" class="btn z-depth-0 timecolor-btn">посмотреть</a>
</div>

.index-list .goods > div.goods-img {
    width: 49%;
    border: 1px solid black;
}

.index-list .goods > div.goods-content {
    width: 49%;
    vertical-align: top;
    box-sizing: border-box;
    padding-left: 30px;
    padding-top: 10%;
    border: 1px solid black;
}

.index-list .goods  div h3 {
    font-family: Raleway-Black;
    color:  #4f4e56;
    font-size: 40px;
    text-transform: uppercase;
}

.index-list .goods  div p {
    font-family: Raleway-Light;
    color:  #4f4e56;
    font-size: 18px;
}

.index-list .btn {
    width: auto;
    height: auto;
    margin-top: 40px;
}

И вот вопрос: как мне сделать второй див с контентом адаптивным по высоте, то есть чтобы при уменьшении высоты первого дива, второй был бы аналогичной высоты ? Спасибо.

Answer 1

[Ankhena]

display: flex;
align-items: stretch;

- родителю

Либо JS

Answer 2

[Super Star]

Можно установить блокам максимальную высоту. Тогда они будут одинаковые по высоте. тоже можно сделать и с шириной.

Flex-box тоже хорошее решение если нужны блоки одинаковой высоты. Подробнее можно почитать тут: html5book.ru/css3-flexbox

Ну или же Js. Я так понимаю тебе нужен equal height. Тут есть 2-а варианта. Существует библиотека на jquery: https://github.com/mattbanks/jQuery.equalHeights или же можно воспользоваться кодом из этого урока: https://www.youtube.com/watch?v=z34QdUtXPD4

Answer 3

[Максим Тимофеев]

общий родитель, блок1 релятивный, 2-й с absolute top:0; height:100%;. Первый собой растягивает родителя, второй растягивается.
Либо js
Либо таблицы