Особенности свойства height в %
Обычно свойство height , указанное в процентах, означает высоту относительно внешнего блока.
Однако, всё не так просто. Интересно, что для произвольного блочного элемента height в процентах работать не будет!
Чтобы лучше понимать ситуацию, рассмотрим пример.
Пример
Наша цель – получить вёрстку такого вида:
При этом блок с левой стрелкой должен быть отдельным элементом внутри контейнера.
Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.
То есть, HTML-код требуется такой:
Как это реализовать? Подумайте перед тем, как читать дальше…
Придумали. Если да – продолжаем.
Есть разные варианты, но, возможно, вы решили сдвинуть .toggler влево, при помощи float:left (тем более что он фиксированной ширины) и увеличить до height: 100% , чтобы он занял всё пространство по вертикали.
Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с height: 100% …
Демо height:100% + float:left
.container < border: 1px solid black; >.content < /* margin-left нужен, так как слева от содержимого будет стрелка */ margin-left: 35px; >.toggler < /* Зададим размеры блока со стрелкой */ height: 100%; width: 30px; float: left; background: #EEE url("arrow_left.png") center center no-repeat; border-right: #AAA 1px solid; cursor: pointer; >А теперь – посмотрим этот вариант в действии:
Как видно, блок со стрелкой вообще исчез! Куда же он подевался?
Ответ нам даст спецификация CSS 2.1 пункт 10.5.
«Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto . Кроме случая, когда у элемента стоит position:absolute .»
В нашем случае высота .container как раз определяется по содержимому, поэтому для .toggler проценты не действуют, а размер вычисляется как при height:auto .
Какая же она – эта автоматическая высота? Вспоминаем, что обычно размеры float определяются по содержимому (10.3.5). А содержимого-то в .toggler нет, так что высота нулевая. Поэтому этот блок и не виден.
Если бы мы точно знали высоту внешнего блока и добавили её в CSS – это решило бы проблему.
/*+ no-beautify */ .container < height: 200px; /* теперь height в % внутри будет работать */ >Адаптивные круглые и другие пропорциональные блоки на CSS
Блок считает свободную ширину родительского блока , то есть 25% — 30px(левый и правый внутренние отступы) и устанавливает верхний внутренний отступ padding-top в значение 100% от высчитаной свободной ширины родительского блока , то есть теперь высота блока равна его ширине.
Блоку также установлено свойство position: relative; , чтобы относительно этого блока позиционировался дочерний блок
Далее просто добавляем блок и задаем ему следующие стили, чтобы он занял всю область блока
.aspect-ratio__body
Если не задать эти стили, то блок будет просто располагаться под верхним внутренним отступом блока
Чтобы сделать из квадрата круг, блоку добавляем сделующие стили
.aspect-ratio__body < position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; /* скрывает часть контента, которых выходит за пределы круга, в данном примере изображение */ border-radius: 50%; /* устанавливает со всех сторон радиус по половине стороны квадрата и получаем круг */ >Таким же образом можно сделать адаптивный пропорциональный прямоугольник любого размера
При произвольных размерах прямоугольника очень просто воспользоваться формулой для установки значения padding-top — calc((высота / ширина)*100%) (calc() можно использовать для всех браузеров)
Например, в макете горизонтальный прямоугольник шириной 754px и высотой 312px и нам нужно его пропорционально адаптировать, то блоку устанавливаем
.aspect-ratio__item < padding-top: calc((312/754)*100%); position: relative; >
Если в макете вертикальный прямоугольник шириной 200px и высотой 350px то устанавливаем следующее
.aspect-ratio__item < padding-top: calc((350/200)*100%); position: relative; >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 — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.
Как сделать адаптивную высоту для блока?
Есть лендинг и идет блок за блоком. И нужно что бы первый блок всегда было видно полностью по высоте. Хоть на 28 дюймов хоть на маке 13 дюймов или на айпед. Как так можно сделать?
- Вопрос задан более трёх лет назад
- 4731 просмотр
Комментировать
Решения вопроса 2
https://habrahabr.ru/post/243161/ легко и просто. Ну, если не под ие6 конечно.
Ответ написан более трёх лет назад
freeman0204 @freeman0204 Автор вопроса
Это хорошо. А как быть с элементами внутри блока. В нем могут быть зоголовки, формы и т. д. Между ними есть отступы. Получается на больших экранах между ними отступы ростянутся и будут большими, а на маленьких наоборот. Это никак не исправить?
Артур Черешнюк: при тех же условиях, можно использовать эту величину или процентное соотношение. Ну или свойство calc, ну или вкрайнем случае JS, чтобы в % от данной высота экрана. Способов море
Ответ написан более трёх лет назад
freeman0204 @freeman0204 Автор вопроса
Это хорошо. А как быть с элементами внутри блока. В нем могут быть зоголовки, формы и т. д. Между ними есть отступы. Получается на больших экранах между ними отступы ростянутся и будут большими, а на маленьких наоборот. Это никак не исправить?
можно сделать через media, можно сделать внутренний блок и вертикально его центрировать, не знаю что именно вам лучше подойдет, не видя исходника
Ankhena @Ankhena Куратор тега CSS
Артур Черешнюк: Включать здравый смысл 🙂
Использовать media запросы, изменять отступы и размеры содержимого, возможно скрывать часть элементов или переносить на следующие экраны.
Зависит от того, что именно должно располагаться внутри и насколько мелким оно имеет право оказаться.
К сожалению, часто не удается убедить заказчика, что идея бредовая, пока он не увидит работающую модель.
freeman0204 @freeman0204 Автор вопроса
Ankhena: Спасибо. Как то не подумал про это media only screen and (max-height: 720px)
>
все время воспринимал медиа как адаптив по ширине.