Как растянуть левый блок по высоте относительно правого?

Ссылка скопирована
CSS HTML Вёрстка
20 февраля 2026 1 ответ

Высота основного блока зависит от содержимого дочерних блоков, статической высоты дочерних блоков не существует.
Мне нужно иметь одинаковую высоту правого и левого блоков без кода js / jquery, если это возможно. А также без использования table, flexbox, grid layouts.

Я попытался установить position: absolute для левого блока. Но высота желтого блока не растягивается, поскольку зависит от содержимого контента. 

<div class="card-wrapper">   <div class="card big">     <div class="card__header"></div>     <div class="card__main">       Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.     </div>     <div class="card__footer">       Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.     </div>   </div>   <div class="right-col">     <div class="card">       <div class="card__header"></div>       <div class="card__main">         Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.       </div>       <div class="card__footer">         Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.       </div>     </div>     <div class="gap"></div>     <div class="card__little">       <div class="card__header"></div>       <div class="card__main">         Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.       </div>       <div class="card__footer">         Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis.       </div>     </div>   </div> </div>

<div class="card-wrapper"> <div class="card big"> <div class="card__header"></div> <div class="card__main"> Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. </div> <div class="card__footer"> Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. </div> </div> <div class="right-col"> <div class="card"> <div class="card__header"></div> <div class="card__main"> Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. </div> <div class="card__footer"> Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. </div> </div> <div class="gap"></div> <div class="card__little"> <div class="card__header"></div> <div class="card__main"> Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. </div> <div class="card__footer"> Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Adipiscing elit ut aliquam purus sit amet luctus venenatis. </div> </div> </div> </div>

.card-wrapper {   display: inline-block;   border: 1px solid #ababab;   border-radius: 10px;   padding: 10px;   box-sizing: border-box;   font-family: Arial, serif;   height: 100%;   width: 100%; }  .big {   width: 66%;   float: left; }  .card {   border: 1px solid black; }  .card__header {   width: 100%;   background: green;   height: 100px; }  .card__main {   background: yellow; }  .card__footer {   background: blue; }  .gap {   padding-top: 10px; }  .right-col {   width: 33%;   float: right; }

.card-wrapper { display: inline-block; border: 1px solid #ababab; border-radius: 10px; padding: 10px; box-sizing: border-box; font-family: Arial, serif; height: 100%; width: 100%; } .big { width: 66%; float: left; } .card { border: 1px solid black; } .card__header { width: 100%; background: green; height: 100px; } .card__main { background: yellow; } .card__footer { background: blue; } .gap { padding-top: 10px; } .right-col { width: 33%; float: right; }

Дополнительно:

Так не выйдет.

Либо флексы и гриды либо js либо таблицы.

  • Ankhena, Вызов принят.
  • Даниил, честно говоря, не вижу в вашем варианте того, что нужно ТС.
  • Ankhena, :D очень жаль, надеюсь stasyan1 не забудет надеть очки
  • Ankhena, нет, у него все соответствует поставленной задаче
  • Flyheck, Даниил, ай какие молодцы, случайно зашли комментировать один древний вопрос )))

    Читаем задачу

    Как растянуть левый блок по высоте относительно правого?

    Смотрим в то, как выглядит исходник

    Как растянуть левый блок по высоте относительно правого?

  • Ankhena, хорошая задача потому что, грех не поделиться) А насчёт того какой блок имеется ввиду, можно воспринять по разному. Тут уже автор пусть уточнит что ему нужно. Тот вариант, что предложил я, решает часто встречающуюся задачу размещения по колонкам, но с поддержкой аж ie6 :D
  • Даниил, да, верно

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Ольга Сеть Ответ

    Для растяжения левого блока по высоте относительно правого блока, можно использовать flexbox. Flexbox - это мощный инструмент в CSS, который позволяет легко управлять распределением элементов внутри контейнера.

    В данном случае, мы можем использовать свойство display: flex; для родительского контейнера и свойство flex: 1; для левого блока. Это позволит левому блоку растянуться по высоте относительно правого блока, если правый блок имеет большую высоту.

    Пример кода на HTML и CSS:

    <div class="container">
  <div class="left-block">Left Block</div>
  <div class="right-block">Right Block</div>
</div>

    <div class="container"> <div class="left-block">Left Block</div> <div class="right-block">Right Block</div> </div>

    .container {
  display: flex;
}
 
.left-block {
  flex: 1;
}
 
.right-block {
  /* стили для правого блока */
}

    .container { display: flex; } .left-block { flex: 1; } .right-block { /* стили для правого блока */ }

    В данном примере, левый блок будет растягиваться по высоте относительно правого блока, так как мы указали ему flex: 1;.

    Таким образом, используя flexbox, можно легко решить проблему растяжения левого блока по высоте относительно правого блока.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ