Css ширина: min-width | htmlbook.ru

Leave a Comment / Css / By /

min-width | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.0+1.0+4.0+2.0+1.0+2.1+2.0+

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам, кроме встроенных и таблиц
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visudet.html#propdef-min-width

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

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

Табл. 1. Ширина элемента
Значения свойствШирина
min-width<width<max-widthwidth
min-width>width>max-widthmin-width
min-width>width<max-widthmin-width
min-width<width  width
min-width>width  min-width
min-width>  max-widthmin-width
min-width<  max-widthmax-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Синтаксис

min-width: значение | проценты | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>min-width</title>
  <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>
   <div>Колонка 1</div>
   <div>Колонка 2</div>
  </div>
 </body>
</html>

Результат данного примера показан на рис.  1.

Рис. 1. Результат использования min-width в браузере

Объектная модель

[window.]document.getElementById(«elementID»).style.minWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Размеры

CSS по теме

  • min-width

Статьи по теме

  • Типовые макеты

Рецепты CSS

  • Как разместить два слоя с заданной шириной рядом по горизонтали?

Свойство width | CSS справочник

CSS свойства

Определение и применение

CSS свойство width устанавливает ширину области содержимого элемента. Свойства min-width и max-width могут переопределить ширину.

CSS свойство width не включает в себя отступы (padding), границы (border) и поля (margin):

  • Общая ширина элемента вычисляется по формуле:
    width (ширина) + padding-left (левый отступ) + padding-right(правый отступ) + border-left (левая граница) + border-right(правая граница).

  • Общая высота элемента вычисляется по формуле:
    height (ширина) + padding-top (верхний отступ)+padding-bottom(нижний отступ) + border-top (верхняя граница) + border-bottom(нижняя граница).

Поддержка браузерами

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
width1.01.03.51.04.012.0

CSS синтаксис:

width:"auto | length | initial | inherit";

JavaScript синтаксис:

object.style.width = "10%"

Значения свойства

ЗначениеОписание
autoБраузер вычисляет ширину самостоятельно. Это значение по умолчанию.
lengthОпределяет ширину в пикселях, см и др.
%Определяет ширину в процентах от содержащего блока родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойства height и width.</title>
<style> 
.primer1 {
width :25px; /* задаём ширину блока */
height :25px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}

 
.primer2 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer3 {
width :75px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer4 {
width :100px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
. primer5 {
width :125px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "primer1"></div>
		<div class = "primer2"></div>
		<div class = "primer3"></div>
		<div class = "primer4"></div>
		<div class = "primer5"></div>
	</body>
</html>
Пример использования свойств height и width.CSS свойства

html — автоматическое определение ширины с учетом соответствия содержимого в css

спросил

Изменено 3 года, 2 месяца назад

Просмотрено 43к раз

Я пытаюсь сделать так, чтобы родительское подразделение было меньше дочернего, используя min-width и fit-content .

Сначала я устанавливаю подразделение .parent с минимальной шириной : fit-content . Затем я добавил дочерний элемент с width: 100px и min-width: fit-content

. Наконец, я добавил дочерним элементам достаточно символов, чтобы разбить 100px ;

 .родитель {
  граница: 1px сплошной красный;
  ширина: подгонка содержимого;
}

.дети {
  граница: 1px сплошной зеленый;
  минимальная ширина: подходящее содержание;
  ширина: 100 пикселей;
} 
 <дел>
  <дел>
    аааааааааааааааааааааааааааааааааааааааааааааааааааа

ДЕМО: https://codepen.io/osasseville/pen/NadrgB?editors=1100

Я ожидаю, что родитель будет соответствовать содержанию дочерних элементов, которые соответствуют содержанию символов.

Странно, но если я изменю ширину дочерних элементов на 1%, минимальная ширина будет соблюдена .

  • HTML
  • CSS

8

Код работает как надо. Родительский div будет растягивать свою ширину только до содержимого внутри него, то есть дочернего div.

А здесь вы определили ширину дочернего div как 100px, поэтому ширина родительского div также будет увеличиваться только до 100px, а текст, выходящий за пределы дочернего div, не считается содержимым для родительского div.

Если вы хотите, чтобы родительский элемент соответствовал содержимому дочерних элементов, вы должны изменить ширину дочернего элемента div на fit-content

нравится это

 .parent {
  граница: 1px сплошной красный;
  ширина: подгонка содержимого;
}

.дети {
  граница: 1px сплошной зеленый;
  ширина: подгонка содержимого;
} 
 <дел>
  <дел>
    аааааааааааааааааааааааааааааааааааааааааааааааааааа