Min and max width/height in css

CSS Properties


Definition and Usage

The property defines the maximum height of an element.

If the content is larger than the maximum height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

If the content is smaller than the maximum height, the property has no effect.

Note: This prevents the value of the height property from becoming larger than . The value of the property overrides the height property.

Default value: none
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.maxHeight=»100px» Try it

Understanding Media Query Terminology

Note: I needed to learn the following terminology for everything here to make sense, particularly concerning the not keyword. Here it is as I understand it:

A media rule (MDN also seems to call these media statements) includes the term with all of its ensuing media queries

A media query is a set of feature queries. They can be as simple as one feature query or they can use the and keyword to form a more complex query. Media queries can be comma-separated to form more complex media rules (see the or keyword above).

(Note: Only one feature query in use here.)

NOT . (Note the comma: there are two media queries here.)

A feature query is the most basic portion of a media rule and simply concerns a given feature and its status in a given browsing situation.

Code snippets and information derived from:

Редактор кода — Примеры

Установить ширину и высоту элементов В этом примере показано, как задать высоту и ширину различных элементов.

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

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

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

Все CSS свойства размеров

Свойство Описание
height Устанавливает высоту элемента
max-height Устанавливает максимальную высоту элемента
max-width Устанавливает максимальную ширину элемента
min-height Устанавливает минимальную высоту элемента
min-width Устанавливает минимальную ширину элемента
width Устанавливает ширину элемента

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

How does it work?

There are in fact two transitions involved in making this happen. One of them transitions the from 0px (in the expanded state) to in the collapsed state (similar to this answer). The 2000 here is the first magic number, it’s based on the assumption that your box won’t be higher than this (2000 pixels seems like a reasonable choice).

Using the transition alone by itself has two issues:

  • If you actually have a box that’s higher than 2000 pixels, then a won’t hide everything — there’ll be visible stuff even in the collapsed case. This is a minor fix that we’ll do later.
  • If the actual box is, say, 1000 pixels high, and your transition is 300ms long, then the visible transition is already over after about 150ms (or, in the opposite direction, starts 150ms late).

Fixing this second issue is where the second transition comes in, and this transition conceptually targets the wrapper’s minimum height («conceptually» because we’re not actually using the property for this; more on that later).

Here’s an animation that shows how combining the bottom margin transition with the minimum height transition, both of equal duration, gives us a combined transition from full height to zero height that has the same duration.

The left bar shows how the negative bottom margin pushes the bottom upwards, reducing the visible height. The middle bar shows how the minimum height ensures that in the collapsing case, the transition doesn’t end early, and in the expanding case, the transition doesn’t start late. The right bar shows how the combination of the two causes the box to transition from full height to zero height in the correct amount of time.

For my demo I’ve settled on 50px as the upper minimum height value. This is the second magic number, and it should be lower than the box’ height would ever be. 50px seems reasonable as well; it seems unlikely that you’d very often want to make an element collapsible that isn’t even 50 pixels high in the first place.

As you can see in the animation, the resulting transition is continuous, but it is not differentiable — at the moment when the minimum height is equal to the full height adjusted by the bottom margin, there is a sudden change in speed. This is very noticeable in the animation because it uses a linear timing function for both transitions, and because the whole transition is very slow. In the actual case (my demo at the top), the transition only takes 300ms, and the bottom margin transition is not linear. I’ve played around with a lot of different timing functions for both transitions, and the ones I ended up with felt like they worked best for the widest variety of cases.

Two problems remain to fix:

  1. the point from above, where boxes of more than 2000 pixels height aren’t completely hidden in the collapsed state,
  2. and the reverse problem, where in the non-hidden case, boxes of less than 50 pixels height are too high even when the transition isn’t running, because the minimum height keeps them at 50 pixels.

We solve the first problem by giving the container element a in the collapsed case, with a transition. This means that it’s not really a transition, but the is applied with a delay; it only applies once the transition is over. For this to work correctly, we also need to pick a numerical for the opposite, non-collapsed, state. But unlike in the 2000px case, where picking too large of a number affects the quality of the transition, in this case, it really doesn’t matter. So we can just pick a number that is so high that we know that no height will ever come close to this. I picked a million pixels. If you feel you may need to support content of a height of more than a million pixels, then 1) I’m sorry, and 2) just add a couple of zeros.

The second problem is the reason why we’re not actually using for the minimum height transition. Instead, there is an pseudo-element in the container with a that transitions from 50px to zero. This has the same effect as a : It won’t let the container shrink below whatever height the pseudo-element currently has. But because we’re using , not , we can now use (once again applied with a delay) to set the pseudo-element’s actual height to zero once the transition is over, ensuring that at least outside the transition, even small elements have the correct height. Because is stronger than , this wouldn’t work if we used the container’s instead of the pseudo-element’s . Just like the in the previous paragraph, this also needs a value for the opposite end of the transition. But in this case we can just pick the 50px.

Definition and Usage

The property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If the element will automatically adjust its height to allow its content to be displayed correctly.

If is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will handle the overflowing content is defined by the overflow property.

Note: The min-height and max-height properties override the property.

Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS1
JavaScript syntax: object.style.height=»500px» Try it

Обнуление минимальной ширины для Flexbox

Значение по умолчанию у свойства равняется auto, что вычисляется как ноль. Когда элемент является flex-элементом, значение не становится нулём. Минимальный размер flex-элемента равняется размеру его содержимого.

Согласно CSSWG:По умолчанию, flex-элементы не становятся меньше минимального размера, необходимого их содержимому (длина самого длинного слова или элемента с фиксированным размером). Чтобы изменить это, задайте свойство или .

Рассмотрим следующий пример

Имя пользователя содержит очень длинное слово, которое вызывает переполнение и горизонтальную прокрутку. Хотя я и добавил представленный ниже CSS для усечения содержимого:


.c-person__name {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

Поскольку заголовок является флекс-элементом, решение состоит в том, чтобы сбросить значение min-width и заставить его стать нулём


.c-person__name {/*Other styles*/  min-width: 0;}

Вот как это должно выглядеть после исправления:

Из описания в следует, что установка свойства в значение, отличное от , может привести к тому, что значение min-width будет вычислено как ноль, что также решает нашу проблему без необходимости явно задавать .

Пдд для контроля в сфере грузоперевозок

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


В пдд имеются пункты, в которых говориться о массе перевозимого груза и условий транспортировки негабарита:

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

Допустимую массу перевозимого груза устанавливает производитель транспортного средства

Использование крепежа

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

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

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

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

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

Ответственность за крепеж груза на легковом автомобиле несет его водитель

Допуск к перевозке


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

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

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

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

Негабаритные грузоперевозки

Согласно данным правилам, при перевозке легковым автомобилем, водитель должен заранее позаботиться о возможных знаках — указателях. Движение без них запрещено. Задача по обеспечению перевозки предмета безопасно, как для товара, так и для участников дорожного движения лежит на водителе. Согласно правилам, если в ночное время негабаритный товар перевозится легковым автомобилем, водитель обязан обозначить границы расположения предметов свето отражающими предметами или при помощи световой индикации. При отсутствии знаков на легковом автомобиле с негабаритом, движение запрещено.

Перевозки грузовыми автомобилями, на которых отсутствует знак «крупногабаритный груз», считаются опасными и движение для них запрещено.

Предупреждающий знак являетя обязательным для перевозки крупногабаритных грузов


Мобильные устройства в наши дни, как правило, довольно прилично выполняют работу по отображению сайтов. Иногда им может понадобиться небольшая помощь, связанная, в частности, с определением размера области просмотра, масштабированием и разрешением сайта. Чтобы исправить это, Apple внедрил метатег viewport.

Рис. 4.04. Хотя это всего лишь демонстрация медиа-запросов, многие мобильные устройства до сих пор не знают о начальной ширине или масштабировании сайта. При этом они могут не препятствовать медиа-запросам.

Высота и ширина области просмотра

Использование метатега viewport со значениями height или width будет определять, соответственно, высоту или ширину области просмотра. Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принимается ключевое слово device-height, а для свойства width принимается ключевое слово device-width. С помощью этих ключевых слов будет наследоваться ширина и высота устройства по умолчанию.

Для достижения наилучших результатов и красиво выглядящего сайта рекомендуется использовать значения устройства по умолчанию путём применения device-height и device-width.

Рис. 4.05. Разрешив устройствам узнать предполагаемую ширину сайта, device-width в данном случае, это позволило сайту принять правильный размер и подобрать любые точные медиа-запросы.

Масштабирование области просмотра

Для управления масштабированием сайта на мобильном устройстве и насколько пользователи могут его масштабировать, применяются свойства minimum-scale, maximum-scale, initial-scale и user-scalable.

initial-scale для сайта должно быть установлен в 1, так как это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, то это будет соотношение между шириной устройства и размером области просмотра. Значением initial-scale всегда должно быть положительное целое число от 0 до 10.

Рис. 4.06. Использование целого числа больше 1 будет увеличить сайт больше, чем масштаб по умолчанию. Вообще говоря, это значение наиболее часто устанавливается в 1.

Значения minimum-scale и maximum-scale определяют, насколько область просмотра может масштабироваться в меньшую и большую стороны. При использовании minimum-scale значение должно быть положительным целым числом меньше или равным initial-scale. Используя те же рассуждения, значение maximum-scale должно быть положительным целым числом больше или равным initial-scale. Оба значения также должны быть от 0 до 10.

Вообще говоря, эти значения не должны быть установлены на то же значение, что и initial-scale. Это позволит отключить любое масштабирование, которое может быть выполнено взамен применения значения user-scalable. Установка значения user-scalable в no отключит любое масштабирование. В качестве альтернативы, установив значение user-scalable в yes мы включим масштабирование.

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

Разрешение области просмотра

Давая браузеру решать, как масштабировать сайт основываясь на любых значений масштаба области просмотра, обычно делают один трюк. Когда требуется больше контроля, в частности, над разрешением устройства, может быть использовано значение target-densitydpi. target-densitydpi принимает несколько значений, включая device-dpi, high-dpi, medium-dpi, low-dpi или конкретное число точек на дюйм.

Значение target-densitydpi применяется редко, но оно чрезвычайно полезно, когда необходим попиксельный контроль.

Комбинация значений

Метатег viewport принимает отдельные значения наряду с множеством значений, позволяя установить несколько свойств за раз. Установка нескольких значений требует разделения запятыми в значении атрибута content. Одно из рекомендованных значений приведено ниже, в котором используются свойства width и initial-scale.

Рис. 4.07. Комбинация width=device-width и initial-scale=1 обеспечивает начальный размер и требуемое масштабирование.

Правило @viewport

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

В настоящее время в некоторых браузерах уже реализовано правило @viewport, однако поддержка не так повсеместна. Ранее рекомендованный метатег viewport будет выглядеть следующим правилом в CSS.

CSS Свойства


CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right


tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode


Использование width, max-width и margin: auto;

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

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

Этот элемент <div> имеет width 500px, а margin установлен auto.

Примечание: Проблема с выше происходит, когда окно браузера меньше ширины элемента. Затем браузер добавляет на страницу горизонтальную полосу прокрутки.

Использование вместо этого улучшит работу браузера с небольшими окнами

Это важно при создании сайта, пригодного для использования на небольших устройствах (т.е. для адаптивности):

Этот <div> элемент имеет max-width 500px и margin установлен в auto.

Совет: Измените размер окна браузера до ширины менее 500 пикселей, чтобы увидеть разницу между двумя div-ами!

Вот пример двух div-ов выше:


div.ex1 {  width: 500px;  margin: auto;  border: 3px solid #73AD21;}div.ex2 {  max-width: 500px;  margin: auto;  border: 3px solid #73AD21;}

❮ Prev Next ❯

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.

С этим читают