Css высота другого элемента
как заставить родительский div растягиваться по высоте дочернего?
как сделать так чтобы в зависимости от содержимого(высоты) дочернего div’a высота родительского div’a тоже изменялась
Если у Вас в стилях не задана высота, то он автоматом должен принимать высоту равную сумме высот содержимого.
Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?
Буквально сразу после того как написал сообщение, нашел решение.
Нужно после двух div’ов с свойством float вставить div со свойством clear
Видимо, это происходило из-за свойства float. Без него нормально работает.
Почему это происходит — не знаю. Моих познаний для понятия этого не достаточно.
Если кто знает, отпишитесь плз.
Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?
Видимо, это происходило из-за свойства 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
Видимо, это происходило из-за свойства float. Без него нормально работает.
Почему это происходит — не знаю. Моих познаний для понятия этого не достаточно.
Если кто знает, отпишитесь плз.
Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. Размеры будут влиять только на отображение строковых (ну и строчно-блочных элементов).
Любой строчный элемент (не плавающий) в том же блоке останется в предыдущем контексте и потоке, таким образом расширяя родителя по высоте. То же самое касается блочного элемента с clear:both/left/right, он отменяет для себя обтекание, таким образом падая под плавающие элементы и, находясь в прежнем контексте, также расширяет родителя.
overflow: hidden для родителя, без задания ему четких размеров будет пытаться всосать в себя все, что находится внутри (за исключением элементов, которые вообще вырваны из потока [вроде position:absolute/fixed] ). Однако достаточно любого незначительного изменения на странице (хоть css:hover в абсолютно другом месте), чтобы такой элемент начал пересчитывать свои размеры по-новой, что губительно сказывается на производительности.
display: inline-block для родителя (иначе говоря hasLayout), по-сути тоже самое что и вариант с overflow, только будет пересчитываться уже относительно соседей по потоку (так как находится в строковом потоке), что чуть быстрее оверфлоу, но все-же не то.
Так что лучше использовать обычный клеар-фикс через псевдо-элемент ::after (если не нужна поддержка ИЕ7 и ниже). Верстку не загадит и работает быстро
Высота и ширина
CSS свойства height и width используются, чтобы устанавливать высоту и ширину HTML элемента.
CSS свойство max-width позволяет установить максимальную высоту HTML элемента.
Определение высоты и ширины
Свойства height и width позволяют определить высоту и ширину HTML элемента.
Свойства height и width не учитывают поля, рамки или отступы элемента. Они устанавливают высоту/ширину области содержимого внутри полей, рамок и отступов элемента.
Свойства height и width могут принимать следующие значения:
- auto — Значение по умолчанию. Высоту и ширину вычисляет браузер
- ширина — Значение в единицах измерения длины (px, pt, cm и т.д.)
- % — Значение в процентах от содержащего блока
- initial — Устанавливает высоту/ширину в значение по умолчанию
- inherit — Значение будет наследоваться от родительского элемента
Примеры
Установим высоту и ширину элемента :
Установим высоту и ширину другого элемента :
Внимание! Помните, что свойства height и width не включают поля, рамки или отступы элемента! Они устанавливают высоту/ширину области содержимого внутри полей, рамок и отступов элемента!
Определение максимальной ширины
Свойство max-width позволяет определять максимальную ширину элемента.
Допустимые значения max-width
- ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
- % — значение в процентах от содержащего блока
- none — значение по умолчанию, которое означает, что максимальная ширина не установлена.
Проблема с элементом из предыдущего примера возникает тогда, когда ширина окна браузера становится меньше, чем ширина элемента (500px). В этом случае браузер добавит горизонтальную полосу прокрутки.
Если же в этом случае вместо width использовать свойство max-width , то ситуация улучшиться.
Измените ширину окна браузера, чтобы увидеть разное поведение этих двух элементов.
Внимание ! Если вы по каким-либо причинам с одним и тем же элементом используете и свойство width и свойство max-width , и при этом значение width больше значения max-width , то использоваться будет свойство max-width (свойство width будет игнорироваться).
У этого элемента будет высота 100 пикселей и максимальная ширина 500 пикселей:
Все CSS свойства определения размеров
Свойство Описание height Определяет высоту элемента max-height Определяет максимальную высоту элемента max-width Определяет максимальную ширину элемента min-height Определяет минимальную высоту элемента min-width Определяет минимальную ширину элемента width Определяет ширину элемента
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 — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.