CSS столбец равной высоты

Question

Как я могу заставить правый столбец иметь такую ​​же высоту, как левый столбец (изображение) в этом примере, используя CSS?

https://jsfiddle.net/robtndfy

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

Я могу решить эту проблему, добавив код jquery:

$('.comments').css('height', $('.image').height() - 160);

Высота комментариев теперь установлена ​​на высоту изображения минус верхняя и нижняя границы.

Answer 1

Самый простой метод CSS - использовать контейнер position:absolute внутри правого столбца.

<div class="container-fluid">
    <div class="row my-5 mx-auto border" style="max-width: 950px;">
        <div class="col-auto p-0" style="max-width: 600px;">
            <img class="image" src="..." style="width: 100%;">
        </div>
        <div class="col px-0 overflow-auto" style="width: 348px; background: #e3e3e3;">
            <div class="position-absolute px-2 w-100">
                <div class="row" style="height: 80px; background: red;">
                    <div class="col">
                        <p>Top</p>
                    </div>
                </div>
                <div class="row comments" style="overflow-y: auto;">
                    <div class="col">
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                        <div class="row m-0">
                            Comments
                        </div>
                    </div>
                </div>
                <div class="row" style="height: 80px; background: red;">
                    <div class="col">
                        <p>Bottom</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/j4qHjRasDH

Если вы хотите прокручивать только раздел комментариев, используйте flexbox на абсолютном контейнере: https://www.codeply.com/go/eMxTl1mB12

Также обратите внимание, что "верхний" и "нижний" контент не должен помещаться непосредственно в .row. Строки должны содержать только столбцы, а содержимое должно размещаться внутри столбцов.

<Ч />

Похожие: Bootstrap 4 Вертикальное выравнивание между 2 делениями - Flex

Answer 2

По моему мнению, самый простой способ справиться с этим - поместить оба столбца в родительский элемент div, у которого есть свойство max-height и набор overflow: hidden. Оттуда установите левый столбец на height: 100%;. Установите правую высоту столбца равной 100%, например, присвойте верхнему и нижнему divам значение height: 20%; для каждой, а для средней секции - height: 60%;.

Если вы хотите, чтобы все было еще более аккуратно, поместите все в таблицу с двумя столбцами, чтобы вам не приходилось беспокоиться о вещах, плавающих странно (по крайней мере, несколько).