Установка высоты и ширины
Свойства height и width используются для задания высоты и ширины элемента.
height и width могут быть установлены в Auto (это по умолчанию. Означает, что обозреватель вычисляет высоту и ширину) или указывается в значениях длины, таких как px, cm и т. д., или в процентах (%), содержащихся в блоке.
Пример
Пример
Примечание: Свойства height и width не включают заполнение, границы или поля; они устанавливают высоту/ширину области внутри заполнения, границы и поля элемента!
Установка Макс-ширина
Свойство max-width используется для задания максимальной ширины элемента.
max-width может быть задано в значениях длины, таких как px, cm и т.д., или в процентах (%), содержащихся в блоке, или значение None (по умолчанию. Означает, что максимальная ширина отсутствует).
Использование max-width вместо этого, в этой ситуации, улучшит обработку браузера небольших окон.
Совет: Перетащите окно браузера в меньшую ширину, чем 500px, чтобы увидеть разницу между двумя div!
В следующем примере показан элемент
Пример
Попробуйте примеры
Установка высоты и ширины элементов
В этом примере показано, как задать высоту и ширину различных элементов.
Установка высоты и ширины изображения с помощью процента
В этом примере показано, как задать высоту и ширину изображения, используя значение процента.
Установить минимальную ширину и максимальную ширину элемента
В этом примере демонстрируется, как задать минимальную ширину и максимальную ширину элемента, используя значение пиксела.
Установить min-высоту и максимальную высоту элемента
В этом примере показано, как задать минимальную высоту и максимальную высоту элемента, используя значение пиксела.
Математические функции в CSS
Например, не получится сделать значение на основе пикселей, зависящее от единиц вьюпорта. Вот этот пример работать не будет (это SCSS):
Компилятор будет ругаться на несочетаемые единицы.
calc() сможет сложить пиксели и единицы вьюпорта. Это позволит сделать плавающий размер шрифта, который будет зависеть от ширины окна браузера. Препроцессоры так не умеют.
Таким образом, главное преимущество математических функций в CSS — динамичность значений благодаря способности сочетать абсолютные и относительные единицы измерения.
Ещё важно помнить, что при использовании препроцессоров CSS-функции могут конфликтовать с препроцессорными. Например, если в SCSS или в Less написать такое:
компилятор будет ругаться на несовместимые единицы, потому что сработает функция из препроцессора.
Чтобы препроцессоры при компиляции не пытались выполнить CSS-функции, в SCSS предлагается писать имя функции с заглавной буквы:
Подробнее об этом можно почитать в статье Аны Тюдор When Sass and New CSS Features Collide.
В LESS поможет оборачивание кавычками:
min(), max()
Функция min() возвращает минимальное из переданных значений, max() — максимальное. При использовании процентов или относительных единиц выбираемое значение будет динамическим и будет зависеть от внешних условий. Например:
Если поресайзить окно с примером, можно увидеть как это работает.
Функция min() будет выбирать подходящее значение учитывая ширину окна в данный момент.
Этот код не делает ничего особенного, что не умел бы CSS без математических функций: точно такое же поведение можно получить задав width и max-width :
Оба варианта для сравнения:
Порастягивайте демо, чтобы увидеть, что разницы в поведении блоков нет.
На первый взгляд, min() и max() не делают ничего интересного, но если подумать, как много мест в CSS, где можно управлять диапазоном значений?
Это доступно только для ширины и высоты:
и их аналогов, привязанных к направлению письма:
Если попытаться реализовать подобное на JS, пришлось бы отслеживать ресайз окна, получать вычисленное значение, и при превышении заданного порога, фиксировать значение на определённом уровне. При использовании min() и max() браузер всё делает сам: отслеживает изменение значений и, при необходимости, фиксирует их — нам нужно просто выбрать функцию и задать диапазон значений.
Это будет работать во всех свойствах, которые используют размеры, в том числе в тенях, градиентах и прочем. Пример с box-shadow :
Экспериментируя с функциями min() и max() можно заметить, что они дают возможность управлять или минимальным значением, или максимальным, но нельзя контролировать и то, и другое одновременно. Хотя совершенно логичным выглядит желание, например, задать размер шрифта, который будет расти в диапазоне от минимального значения до максимального и не выходить за эти значения.
Для такого есть ещё одна функция:
clamp()
И вычисляет значение вот таким образом:
Проще всего её понимать представляя среднее значение ( VAL ) как желаемое, которое ограничено минимальным и максимальным значениями. Например, этот код
Аналогичный подход часто используется при разработке адаптивных сайтов: мы задаём минимальное и максимальное значения ширины страницы, позволяя ей тянуться и сжиматься в заданных пределах, например, в диапазоне от 320px до 1200px :
Используя clamp() это можно записать в одну строчку:
Оба блока ведут себя совершенно одинаково, разница только в возможностях этих подходов: clamp() позволяет добавить умную динамику значений в любое свойство, не только в размеры блоков. Мне нравится идея использовать clamp() для адаптивных шрифтов, почитать про это можно в статье Linearly Scale font-size with CSS clamp() Based on the Viewport.
Функция позволяет производить математические операции:
В отличие от препроцессорных вычислений, calc() позволяет сочетать любые совместимые значения. Например, можно вычесть пиксели из процентов:
Внутри calc() можно использовать кастомные свойства, и это делает вычисления в CSS гораздо мощнее препроцессорных. Например, на calc() и кастомных свойствах можно без каких-либо скриптов сделать простой генератор цветовых схем:
По клику на цвет в CSS меняется значение CSS-переменной, и вся палитра пересчитывается.
Рассчёт оттенка ( hue из HSL) делается таким образом:
И затем оттенок используется для формирования цвета в формате HSL:
Конечно, подобные вещи удобнее и логичнее делать на JS, демо просто показывает, что CSS достаточно мощный, чтобы уметь такое.
Примеры использования
Cохранение логики рассчётов
Например, если нужна ширина в 1/12 от общей, можно высчитать значение и записать его в стили:
Но так непонятно что это за число. Станет немного понятнее, если логику рассчёта положить рядом в комментарии:
Так сразу понятно, что элемент занимает 1/12 ширины родителя, и не нужно поддерживать комментарии в актуальном состоянии.
Управление размерами элементов
Например, есть карточка с картинкой, картинка ужимается под ширину колонки с текстом:
Как растянуть картинку на ширину карточки не привязываясь к размерам карточки? С помощью calc() :
Можно ещё немного улучшить код, используя кастомные свойства:
Так сохранится логика рассчётов, 1rem становится не магическим числом, а именованной переменной, и по самому коду будет понятно, что ширина картинки увеличивается на два паддинга, а потом сдвигается влево на один. Можно примерно понять что делает этот код даже не глядя на страницу в браузере.
Ещё это будет полезно для инпутов. Допустим, нужно, чтобы инпут тянулся на всю ширину родителя, оставляя 40 пикселей справа. Вариант с фиксированной шириной не подходит для адаптивного дизайна. Если просто задать ширину 100% и марджин, блок растянется на всю ширину и сжиматься не будет. С этой задачей прекрасно справится calc() :
Текстовое поле всегда будет отодвинуто от края на 40px (+ паддинг) независимо от размера родительского элемента.
Адаптивная типографика
С помощью calc() можно примешивать единицы вьюпорта к обычному размеру шрифта, тогда при увеличении размеров экрана будет расти и шрифт:
Порастягивайте демо, чтобы увидеть как размер окна влияет на размер шрифта:
Почитать об этом больше можно тут или тут.
Управление размерами фона
С помощью calc() можно задать размер фоновому изображению, комбинируя фиксированные единицы и проценты. Например, чтобы фон всегда отступал от краёв на определённое значение:
Полосатые поля показывают прозрачные области вокруг разноцветного градиента.
Используя этот же подход можно делать вырезанные углы квадратной формы:
В отличие от версии с коническими градиентами, этот вариант будет работать во всех браузерах. Способ был предложен Ильёй Стрельциным.
Также можно рисовать линейными градиентами полосы заданной ширины:
Вычисление цветов и шагов градиента
Иногда для экспериментов нужен полосатый градиент. Чтобы не считать параметры руками, их можно вычислять с помощью calc() на основе кастомных свойств. Вот так задаются параметры:
А вот так потом высчитывается оттенок:
Редактируя переменные можно менять параметры градиента без необходимости пересчитывать вручную шаги или переписывать весь градиент.
Правда, при таком автоматическим вычислении оттенков могут получаться не очень красивые цвета, но для экспериментов вполне пойдёт.
Область применения cacl() гораздо шире перечисленных примеров. В некоторых случаях, если значения не должны меняться динамически, с подобными задачами справятся и препроцессоры, но если должны, например, при изменении кастомных свойств или размера окна, — без calc() не обойтись.
Нюансы
При использовании calc() нужно помнить о некоторых тонкостях:
calc() умеет производить рассчёты только для совместимых единиц. Например, можно сложить пиксели с процентами или единицами вьюпорта, градусы с радианами и вычесть миллисекунды из секунд, но вот сложить секунды с пикселями или градусы с единицами вьюпорта ожидаемо не получится, потому что непонятно в каких единицах ожидается результат.
У меня была слегка безумная идея привязать градусы градиента к ширине вьюпорта (и вращать градиент растягивая окно браузера), но я не придумала как это можно реализовать, и не уверена, что это в принципе возможно без JS;
Светлое будущее?
В спецификации есть интересный момент: утверждается, что внутри calc() в качестве значений можно использовать содержимое атрибутов, да и в принципе можно использовать атрибуты как значения CSS-свойств.
От обычного использования attr() в качестве содержимого псевдоэелемента это отличается указанием типа содержимого:
Или единиц измерения:
Значение после запятой — запасное, на случай, если не удастся получить или распарсить значение атрибута.
Поначалу эта конструкция показалась мне странной: зачем класть данные в атрибуты, а потом ещё и типизировать их в CSS, если можно сразу положить нужное в кастомные свойства?
Но в твиттере мне быстро накидали примеров, когда это было бы действительно удобно. Например, получая размеры из атрибутов было бы удобно делать адаптивные картинки и фреймы. У меня получилось сделать адаптивное видео, используя кастомные свойства, но для этого приходится дублировать размеры в инлайновых стилях. Если бы можно было считывать значения из атрибутов, без дублирования можно было бы обойтись.
На момент написания статьи это не поддерживается ни одним браузером, но есть некоторая надежда, что однажды это заработает, потому что подобное использование атрибутов описано в спецификации свойства, которое помогло бы управлять соотношением сторон: aspect-ratio. Там есть такой пример:
И вот это было бы очень круто, потому что избавило бы разработчиков от необходимости городить странные конструкции для решения той же задачи. Почитать про aspect-ratio можно в статье Рэйчел Эндрю Designing An Aspect Ratio Unit For CSS.
Поддержка браузерами
При необходимости проверить поддержку функций и кастомных свойств можно воспользоваться @supports (также учитывая поддержку браузерами для него):
100% Min Height CSS layout
14 Answers 14
The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don’t need (or want) the physical elements to create such a visual effect. If you’re not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
Relative positioning
Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
Padding-bottom
Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
Scale the text size a bit or resize your browser window to test this layout.
To set a custom height locked to somewhere:
You may find more information here:
kleolb02’s answer looks pretty good. another way would be a combination of the sticky footer and the min-height hack
Unfortunately, you will need to resort to a JavaScript solution in order to get the desired behavior. This can be done by calculating the desired height for your content
You can then set this function as a handler for onLoad and onResize events:
I agree with Levik as the parent container is set to 100% if you have sidebars and want them to fill the space to meet up with the footer you cannot set them to 100% because they will be 100 percent of the parent height as well which means that the footer ends up getting pushed down when using the clear function.
Think of it this way if your header is say 50px height and your footer is 50px height and the content is just autofitted to the remaining space say 100px for example and the page container is 100% of this value its height will be 200px. Then when you set the sidebar height to 100% it is then 200px even though it is supposed to fit snug in between the header and footer. Instead it ends up being 50px + 200px + 50px so the page is now 300px because the sidebars are set to the same height as the page container. There will be a big white space in the contents of the page.
I am using internet Explorer 9 and this is what I am getting as the effect when using this 100% method. I havent tried it in other browsers and I assume that it may work in some of the other options. but it will not be universal.
Мин высота не работает должным образом?
Я пытаюсь создать DIV с минимальной высотой 100%, который не работает в FireFox / IE. Работает только при использовании свойства «высота».
Хром ведет себя правильно.
Я понимаю, что мне нужно определить высоту тела / HTML. В этом есть смысл. Но даже с этим решением я все еще не могу использовать минимальную высоту для дочернего элемента div. Смотрите пример ниже. Ребенок div не берет 33% родительского div. (В FIREFOX и IE)
4 ответа
Вам также нужно дать html и body высоту
Обновление 1, после редактирования вопроса
Обновление 2, на основе комментария
Который также будет работать с min-height: 33%
Попробуйте добавить в свой код CSS это:
Если честно, я не уверен, почему это работает даже со свойством height. Когда вы используете процентную высоту в CSS, корневой элемент (html, body) должен иметь определенную высоту.
Это потому, что проценты являются процентами родителя. Если корневой элемент не имеет определенной высоты, то из него нельзя рассчитать высоту.
Таким образом, чтобы дать корневому элементу высоту, вы устанавливаете его на 100% следующим образом:
Процент рассчитывается относительно высоты содержащего блока сгенерированного блока. Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, процентное значение рассматривается как 0.
height
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 3.1+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным и заменяемым элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-height |
Версии CSS
Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег ). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow : auto к стилю элемента.
Синтаксис
height: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства height
Объектная модель
[window.]document.getElementById(» elementID «).style.height
Браузеры
В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.
