Как сделать, чтобы высота одной колонки зависила от второй?
Можно ли сделать, чтобы элемент с id "left" всегда был такой же высоты, что и элемент с id "right", при этом контент, который не помещается в элементе id "left" можно было проскролить внутри этого блока. В то же время элемент id "right" может иметь динамическую высоту зависящую от контента и можно ли обойтись без js?
То есть левый блок всегда подстраивается под высоту правого блока, а контент в левом блоке скролиться, а правый блок не имеет скрола и высота его зависит от контента в нем.
<div style="display: flex"> <div id="left" style="width: 200px;background-color: red"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> </div> <div id="right" style="width: 200px;background-color: blue"> 1<br> 2<br> 3<br> </div> </div> |
<div style="display: flex"> <div id="left" style="width: 200px;background-color: red"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> </div> <div id="right" style="width: 200px;background-color: blue"> 1<br> 2<br> 3<br> </div> </div>
Дополнительно:
https://jsfiddle.net/Ankhena/n067dbg9/
- Огромное спасибо
Ответы:
Возможно так
<div style="display: flex;"> <div id="left" style="flex: 1; background-color: red; overflow: auto;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> </div> <div id="right" style="flex: 1; background-color: blue;"> 1<br> 2<br> 3<br> </div> </div> |
<div style="display: flex;"> <div id="left" style="flex: 1; background-color: red; overflow: auto;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> </div> <div id="right" style="flex: 1; background-color: blue;"> 1<br> 2<br> 3<br> </div> </div>
- не, не работает так. overflow не срабатывает потому что высота блока "left" не ограничена и равна высоте его контенту
Ответ: https://www.youtube.com/watch?v=WNuxVtnlQqo
- видео не дает ответ, на тот вопрос, который я задал. Там разбирается другой кейс
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать высоту одной колонки зависимой от другой, можно использовать CSS Flexbox или CSS Grid.
Если вы используете CSS Flexbox, вам нужно установить свойство `display: flex;` на контейнер, который содержит ваши колонки. Затем вы можете использовать свойство `flex: 1;` на дочерних элементах, чтобы они занимали доступное пространство в зависимости от содержимого других элементов. Например:
<div> <div style="flex: 1"> <!-- Ваш контент для первой колонки --> </div> <div style="flex: 2"> <!-- Ваш контент для второй колонки --> </div> </div><div> <div style="flex: 1"> <!-- Ваш контент для первой колонки --> </div> <div style="flex: 2"> <!-- Ваш контент для второй колонки --> </div> </div>
Если вы предпочитаете использовать CSS Grid, вы можете установить сетку с помощью свойств `display: grid;` и `grid-template-columns`, чтобы определить ширину каждой колонки. Затем вы можете использовать `grid-template-rows`, чтобы установить высоту каждой строки. Например:
<div style="grid-template-columns: 1fr 2fr;grid-template-rows: auto"> <div> <!-- Ваш контент для первой колонки --> </div> <div> <!-- Ваш контент для второй колонки --> </div> </div><div style="grid-template-columns: 1fr 2fr;grid-template-rows: auto"> <div> <!-- Ваш контент для первой колонки --> </div> <div> <!-- Ваш контент для второй колонки --> </div> </div>
Оба способа позволяют создать гибкую и адаптивную верстку, где высота одной колонки зависит от содержимого другой. Не забудьте также учитывать адаптивный дизайн и добавить медиа-запросы для оптимального отображения на различных устройствах.