Столбец равной высоты CSS
Как я могу заставить правый столбец иметь ту же высоту, что и левый столбец (изображение) в этом примере, используя CSS?
Верхний и нижний div имеют фиксированную высоту, в то время как комментарии должны прокручиваться, если высота содержимого больше высоты изображения, и заполнять высоту до нижнего div, если высота содержимого меньше высоты изображения.
Я могу решить проблему, добавив этот код jquery:
$('.comments').css('height', $('.image').height() - 160);
Высота комментариев теперь равна высоте изображения за вычетом верхнего и нижнего div.
Ответы 2
На мой взгляд, самый простой способ справиться с этим — поместить оба столбца в родительский div, у которого есть свойство max-height, а также набор overflow: hidden. Оттуда установите левый столбец на height: 100%;. Установите высоту правого столбца равной 100%, например, присвойте верхнему и нижнему разделам height: 20%; каждый, а средней части — height: 60%;.
Если вы хотите, чтобы все было еще чище, поместите все в таблицу с двумя столбцами, чтобы вам не пришлось беспокоиться о том, что вещи плавают странно (по крайней мере, несколько).
Взглянув на свою скрипку, похоже, вы не делаете ничего из того, что я предложил. Рекомендация использовать таблицы не является еще одним решением, это просто дополнение к моему предыдущему решению. Вы установили max-width несколько раз, но я нигде не вижу max-height.
ах, понятно... я не хочу устанавливать динамическую высоту для верхнего и нижнего элементов div, так как изображение может иметь разные размеры
@whyguy, если вы не хотите устанавливать динамическую высоту, потому что не знаете, каким может быть размер изображения, что вы хотите сделать? Это буквально то, для чего нужны динамические значения, когда вы не знаете определения.
Самый простой метод 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 Вертикальное выравнивание между двумя разделами — Flex
спасибо @zim, это было именно то, что я искал, тем временем я работал над этим и смог решить эту проблему, расположив нижнюю часть и комментарии, используя absolutejsfiddle.net/L8hg9t3n
есть идеи, как таблицы решат эту проблему? Я пытался использовать таблицы в этом примере: jsfiddle.net/43op2kjd все еще не мог понять это