Css высота дочернего элемента

как заставить родительский div растягиваться по высоте дочернего?

как сделать так чтобы в зависимости от содержимого(высоты) дочернего div’a высота родительского div’a тоже изменялась

Если у Вас в стилях не задана высота, то он автоматом должен принимать высоту равную сумме высот содержимого.

Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?

Буквально сразу после того как написал сообщение, нашел решение.

Нужно после двух div’ов с свойством float вставить div со свойством clear

Видимо, это происходило из-за свойства float. Без него нормально работает.
Почему это происходит — не знаю. Моих познаний для понятия этого не достаточно.
Если кто знает, отпишитесь плз.

Arassir ведь ответил

"div_main"> "div1">  "div2">  "clear: both;">

Можно ещё сделать «самоочищающийся» контейнер через псевдокласс after

    #div_main < width:300px; border: 2px solid red; >#div1 < float: left; width:100px; min-height:200px; height:200px; background: yellow; >#div2 < float: right; width:200px; height:200px; min-height:200px; background: green; >.clear:after < content: " "; display: block; clear: both; visibility: hidden; height: 0; line-height: 0; >/* для ослика */ * html .clear

Чтобы блок обрамлял все свои дочерние элементы (в том числе и плавающие), ему нужно назначить свойство overflow:hidden

Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. Размеры будут влиять только на отображение строковых (ну и строчно-блочных элементов).
Любой строчный элемент (не плавающий) в том же блоке останется в предыдущем контексте и потоке, таким образом расширяя родителя по высоте. То же самое касается блочного элемента с clear:both/left/right, он отменяет для себя обтекание, таким образом падая под плавающие элементы и, находясь в прежнем контексте, также расширяет родителя.
overflow: hidden для родителя, без задания ему четких размеров будет пытаться всосать в себя все, что находится внутри (за исключением элементов, которые вообще вырваны из потока [вроде position:absolute/fixed] ). Однако достаточно любого незначительного изменения на странице (хоть css:hover в абсолютно другом месте), чтобы такой элемент начал пересчитывать свои размеры по-новой, что губительно сказывается на производительности.
display: inline-block для родителя (иначе говоря hasLayout), по-сути тоже самое что и вариант с overflow, только будет пересчитываться уже относительно соседей по потоку (так как находится в строковом потоке), что чуть быстрее оверфлоу, но все-же не то.

Так что лучше использовать обычный клеар-фикс через псевдо-элемент ::after (если не нужна поддержка ИЕ7 и ниже). Верстку не загадит и работает быстро

Источник

DIV на всю высоту родителя?

Неужели по сей день нет человеческого решения этого вопроса? Страница в несколько экранов, нужно два блока на всю высоту. height:100% дает высоту экрана устройства, а не родителя. Не таблицами же теперь верстать из-за этого..

Но это же костыль. Потом всем остальным блокам давать mardin, чтоб они выползли из под этого элемента. Неужели в CSS нет человеческого решения для этого?

@iiil там все ок, спасибо. просто это 2 части по сути одного вопроса — нужна тень от сайдбара в сторону мейнконтента и для этого сайдбар нужно сделать 100% по высоте.

Слева сайдбар, справа мейнконтент. Оба флоат лефт. Если сайдбар сделать абсолютом, то мейнконтент проваливается под него влево. Нужно делать margin-left: 300px. Решение, да, но костыльноватове)

На самом деле свойство height, указанное в %, работает только если для внешнего блока указана высота. Либо для элементов с абсолютным позиционированием. В этом случае нужно указать top 0 и left 0

.fullpage < position: relative; margin: 0px; padding: 0px; max-width: 100%; min-height: 200%; max-height: 200%; overflow: hidden; >#screen_1, #screen_2 < position: absolute; left: 0px; width: 100%; height: 50%; margin: 0px; padding: 0px; >#screen_1 < top: 0px; >#screen_2

fullpage — родительский блок с высотой в 2 экрана (200%), который содержит в себе 2 дочерних блока с высотой по 1 экрану каждый (50% от fullpage). У первого top: 0px и высота 50%, у второго top: 50% (т.к. он идёт встык после первого блока). Таким образом, мы можем задать n-е кол-во блоков-экранов с высотой (100% / n) и точкой top для каждого
for (i = 0; i < n; i++) top[i] = (100% / n) * i;
>
:)))

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая 🙁

Попробуй задать странице display: flex, а дочерним блокам align-self: stretch (+ flex-shrink: 0, если не нужно сжатия блоков) и не забудь, чтобы у дочерних элементов была указана ширина. Для меня такой способ сработал

Источник

height

Любой HTML-элемент сам по себе по высоте равен нулю. Обычно элементы подстраиваются по высоте под то количество контента, которое лежит у него внутри. Но что делать, если дизайнер придумал иначе, или если внутри вообще ничего нет?

При помощи свойства height можно задать высоту любому блочному (block) или строчно-блочному (inline-block) элементу. Высоту можно задавать как в абсолютных единицах (пикселях px ) так и в относительных (проценты, vh , vmin , rem и так далее).

Помимо фиксированной высоты мы можем задать минимальную высоту элемента — min — height . В этом случае элемент сможет растягиваться на большую высоту, если того требует контент, размещённый внутри, но никогда не сожмётся по высоте меньше, чем указано в свойстве min — height .

Для максимальной высоты мы пишем свойство max — height . И тогда элемент будет иметь возможность растягиваться по высоте до тех пор, пока не достигнет размера, указанного в свойстве max — height . И дальше не растянется ни на пиксель.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="container"> div class="item">div> div>

 .container  /* высота родителя */ height: 150px; padding: 25px; background-color: #AFC9DA;> .item  /* высота вложенного блока */ height: 50px; margin: 0 10px; background-color: #FFFFFF;> .container  /* высота родителя */ height: 150px; padding: 25px; background-color: #AFC9DA; > .item  /* высота вложенного блока */ height: 50px; margin: 0 10px; background-color: #FFFFFF; >

Поскольку оба блока — .container и .item — пустые, в них нет контента, то без стилей их высота будет равна нулю. Мы изменили это, задав элементу .container высоту 150px , а элементу .item высоту 50px .

Добавим контент в элемент .item :

Из-за фиксированной высоты контент вываливается из блока. Как можно это исправить? Заменить height на min — height !

 .item  /* Меняем фиксированную высоту на минимальную */ min-height: 50px; margin: 0 10px; background-color: #FFFFFF;> .item  /* Меняем фиксированную высоту на минимальную */ min-height: 50px; margin: 0 10px; background-color: #FFFFFF; >

Теперь, если контента внутри не будет, то высота блока будет равна 50px , но как только появится контент — элемент растянется по высоте так, чтобы уместить в себе весь контент!

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство height даёт возможность менять высоту любого блока на своё усмотрение.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Пишем свойство height для фиксированной высоты, min — height для минимальной высоты и max — height для максимальной высоты.

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

В качестве значения пишем число, а за ним без пробела единицу измерения: px , % , vh , rem , em или любую другую единицу измерения, доступную в вебе.

 div  height: 10px; min-height: 100%; max-height: 100vh;> div  height: 10px; min-height: 100%; max-height: 100vh; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство высоты не наследуется.

💡 По умолчанию задаётся значение auto .

Это ключевое слово бывает полезно, когда нужно сбросить высоту, заданную ранее. Например, оно пригодится при доработке сайта, к исходным стилям которого нет доступа.

Стили, до которых нет доступа с фиксированной высотой:

 .container  height: 150px;> .container  height: 150px; >

Твои стили, где перезаписывается предыдущее значение: теперь высота подстраивается под контент.

 .container  height: auto;> .container  height: auto; >

Также оно может пригодится при адаптивной вёрстке.

💡 Не задавайте фиксированную высоту блокам, в которых есть контент. Если контента станет больше, то блок не растянется и контент из него выпадет. Не надо так. Если без высоты никак не обойтись, то используйте min — height .

💡 Строчные элементы не реагируют на height . Хотите изменить высоту? Меняйте элемент со строчного ( inline ) на блочный ( block ) или строчно-блочный ( inline — block )!

💡 Пишете height : 100 % и ничего не работает? Помните, что высота в процентах рассчитывается от высоты родителя. И сработает, только если у родителя задана эта самая высота.

Отношения родительский-дочерний элемент проще объяснить на примере.

 div class="parent"> div class="child child-1"> div class="grandchild">div> div> div class="child">div> div class="child">div> div>

В примере выше элемент с классом parent является родительским для элементов с классом child . Они, в свою очередь, будут называться дочерними по отношению к элементу с классом parent .

Для элемента с классом grandchild родительским будет элемент с классом child — 1 .

Применительно к нашей ситуации элемент grandchild будет наследовать свою высоту от элемента child — 1 .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Чаще всего не требуется задавать фиксированную высоту блокам с контентом. Можно обойтись внутренними отступами ( padding ).

Вернёмся к примеру, который разбирали выше. Можно совсем убрать свойство height и заменить его на padding : 25px . Теперь, если контента внутри блока нет, то внутренние отступы сверху (25 пикселей) и снизу (25 пикселей) будут растягивать элемент на 50 пикселей.

Как только добавится контент, блок растянется, не произойдёт никакого выпадения контента, потому что не задана фиксированная высота. От верхнего и нижнего краёв контента до верхнего или нижнего краёв блока соответственно будут отступы в 25 пикселей.

Чтобы родительский блок .container тоже подстраивался под размеры контента, можно:

Заменить фиксированную высоту на минимальную: min — height : 150px .

Убрать высоту совсем и заменить её на внутренние отступы ( padding ). Этот вариант подойдёт, если не принципиально сохранить высоту 150 пикселей.

🛠 Но есть несколько ситуаций, в которых без высоты никак.

В блоке нет контента. Он декоративный. Например, квадрат. Задаём одинаковые высоту и ширину. Profit!
Первый экран сайта. Обычно дизайнеры хотят, чтобы первый экран всегда был по высоте не больше и не меньше высоты экрана пользователя. В этом случае поможет height : 100vh . Не забудь подстраховаться и задать минимальную высоту блоку. Например: min — height : 350px . Никогда нельзя быть уверенным, что высоты экрана пользователя достаточно для того, чтобы уместился весь важный контент.

🛠 В реальных задачах крайне редко требуется задавать высоту в относительных единицах rem и em . Эти единицы завязаны на размере шрифта. Рассчитывать высоту блока от размера текста почти никогда не требуется.

Но другие относительные единицы: vh , vw , а также vmin и vmax — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.

Источник