Как задать дочернему элементу высоту родителя, у которого высота зависит от контента?

Ссылка скопирована
CSS HTML PHP
21 апреля 2026 1 ответ

Не рисуется дочерений элемент по высоте родителя, он может отрисоваться если родителю указать фикс. высоту, но это не мой вариант.
Подскажите пожалуйста в чем проблема. Спасибо!

snippet

<div class='parent'>   <div class='child'></div>   <div class='child2'></div> </div>

<div class='parent'> <div class='child'></div> <div class='child2'></div> </div>

.parent {   padding: 10px;      width: 150px;      display: flex;   justify-content: space-between;      background: red; }  .child {   width: 2px;   height: 100%;      background: #fff; }  .child2 {   width: 50px;   height: 200px;      background: black; }

.parent { padding: 10px; width: 150px; display: flex; justify-content: space-between; background: red; } .child { width: 2px; height: 100%; background: #fff; } .child2 { width: 50px; height: 200px; background: black; }

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

child с белым фоном не должен содержать внутри себя ничего и это должен быть div блок

Может, тогда всё вообще не так? Пустые блоки с большой долей вероятности это чьи-то костыли.
Может, это всё таки border, градиент или псевдо, а вовсе не то, вы пишете?

https://codepen.io/AnnaSummer/pen/OJrqdPp

Ответы:

Попытка понять мыли автора №1:
snippet

Попытка понять мыли автора №2:
snippet

  • Спасибо за ответ, но к сожалению это не решает мою проблему. так как child с белым фоном не должен содержать внутри себя ничего и это должен быть div блок
  • nikmil,

    child с белым фоном не должен содержать внутри себя ничего

    Где это сказано в вопросе?

    и это должен быть div блок

    .child не div блок у меня?

    Как задать дочернему элементу высоту родителя, у которого высота зависит от контента?

    В моем примере высота дочернего элемента равна высоте родителя, у которого высота в свою очередь равна его контенту. Принимайте работу!

  • nikmil, добавил вариант без изображения в .child
Нужно решить такую задачу?

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

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

Для того чтобы задать дочернему элементу высоту родителя, у которого высота зависит от контента, можно использовать различные методы. Один из способов - использовать относительное позиционирование и высоту в процентах.

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

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

В данном примере, родительскому элементу необходимо задать свойство position: relative, чтобы дочерний элемент мог относительно него позиционироваться. Дочернему элементу нужно задать position: absolute и значения top, bottom, left, right равные 0, чтобы он занял всю доступную высоту родителя. При этом свойство margin: auto поможет выровнять элемент по центру.

Если родительский элемент имеет высоту, которая зависит от контента, то дочерний элемент будет автоматически занимать всю доступную высоту родителя.

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

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

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

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

комментарий

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

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

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов