min-width
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
| Значения свойств | Ширина | ||||
|---|---|---|---|---|---|
| min-width | width | max-width | width | ||
| min-width | > | width | > | max-width | min-width |
| min-width | > | width | max-width | min-width | |
| min-width | width | width | |||
| min-width | > | width | min-width | ||
| min-width | > | max-width | min-width | ||
| min-width | max-width | max-width | |||
Данные из таблицы следует понимать следующим образом. Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .
Синтаксис
min-width: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования min-width в браузере
Объектная модель
[window.]document.getElementById(» elementID «).style.minWidth Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
min-width
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
Табл. 1. Ширина элемента Значения свойств Ширина min-width width max-width width min-width > width > max-width min-width min-width > width max-width min-width min-width width width min-width > width min-width min-width > max-width min-width min-width max-width max-width
Данные из таблицы следует понимать следующим образом. Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .
Синтаксис
min-width: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования min-width в браузере
Объектная модель
[window.]document.getElementById(» elementID «).style.minWidth Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
min-width¶
Свойство min-width устанавливает минимальную ширину элемента.
Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width .
Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* value */ min-width: 3.5em; /* value */ min-width: 10%; /* Keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content; min-width: fill-available; /* Global values */ min-width: inherit; min-width: initial; min-width: unset;
Значения¶
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
auto Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content Внутренняя предпочтительная ширина.
min-content Внутренняя минимальная ширина.
fill-available Ширина родительского блока минус горизонтальные margin , border , и padding . (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available .)
fit-content Определяет как min(max-content, max(min-content, fill-available)) .
Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
Поддержка браузерами¶
Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
html> head> meta charset="utf-8" /> title>min-widthtitle> style> .container min-width: 420px; /* Минимальная ширина контейнера */ > .col1 background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ > .col2 background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ > style> head> body> div class="container"> div class="col1">Колонка 1div> div class="col2">Колонка 2div> div> body> html>
Min width in window resizing
I have a webpage with a fluid layout with a 100% width. When I resize browser window the elements in the page overlap. I would create an effect similar to this website http://bologna.bakeca.it/ that when window is smaller than a fixed width stop resizing.
3 Answers 3
You can set min-width property of CSS for body tag. Since this property is not supported by IE6, you can write like:
body < min-width:1000px; // Suppose you want minimum width of 1000px _width: expression( document.body.clientWidth >1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */ >
Well, you pretty much gave yourself the answer. In your CSS give the containing element a min-width. If you have to support IE6 you can use the min-width-trick:
That will effectively give you 800px min-width in IE6 and any up-to-date browsers.
Use @media in CSS
Take a look at @media CSS at-rule.
You can use @media screen and (max-width: . px) and @media screen and (max-height: . px) and set with of your html component to keep you’re page always up to the value you choose. After, if you want users can access the masked content of your page set overflow:auto .
You can’t prevent user resize his browser under this values but you’re web page will never go under the values you select.
For example, for minimum width = 330px and minimum height = 400px, the CSS can look like :
body < width: 100%; height: 100%; >@media screen and (max-width: 330px) < html< width: 330px; overflow: auto; >> @media screen and (max-height: 400px) < html< height: 400px; overflow: auto; >>
