Css высота блока в зависимости от ширины. «Резиновая» макетная сетка по ширине окна

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

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:

Для данного абзаца зададим только ширину и высоту.

Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.

Попробовать »

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100 пикселей, а размеры второго абзаца:

Общая высота:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	верхняя рамка		верхний отступ		высота		нижний отступ		нижняя рамка

то есть 180x130 пикселей.

Переполнение элементов

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством overflow . Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

• visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
• scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
• auto - добавляет полосы прокрутки при необходимости.
• hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.

Влад Мержевич

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задаётся свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Ширина блока это комплексная величина и складывается из нескольких значений свойств:

• width - ширина контента, т.е. содержимого блока;
• padding-left и padding-right - поле слева и справа от контента;
• border-left и border-right - толщина границы слева и справа;
• margin-left и margin-right - отступ слева и справа.

Какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 1 в виде чёрной пунктирной линии.

Рис. 1. Ширина блока

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

Допустим, для слоя написан следующий стиль.

Width: 300px; /* Ширина слоя */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */

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

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

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

Алгоритм блочной модели

Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам - не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 1 приведена поддержка браузерами.

Табл. 1. Поддержка браузерами свойства box-sizing

Браузер	Internet Explorer	Chrome	Opera	Safari	Firefox
Версия	8.0+	2.0+	7.0+	3.0+	1.0+
Свойство	box-sizing	-webkit-box-sizing	box-sizing	-webkit-box-sizing	-moz-box-sizing

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

Пример 1. Ширина блока

HTML5 CSS3 IE Cr Op Sa Fx

Данный пример будет работать во всех браузерах, указанных в табл. 1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдет старый проверенный метод с вложением слоев. Идея простая - для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное - поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 2 показано использование вложенных слоев.

Пример 2. Вложенные слои

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 2. Ширина блока в процентах

Преимуществом вложенных слоев является использование отступов (box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить включение дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.

• Перевод

Продолжение перевода статьи .

Когда использовать width / height равный 100%?

Height: 100%

Пожалуй, начнем с того, что попроще. Когда использовать height: 100% ? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, чтобы моя страница заняла всю высоту экрана?». Ведь правда?

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, чтобы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.

Почему? А потому, что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по умолчанию; а значит - его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.

Почему? А все потому же, родителем элемента body является элемент html, у которого также свойство height равно auto и он также растягивается под размер контента. А вот теперь, если добавить height: 100% и к элементу html, то все заработает.

Стало понятнее? Корневой элемент html на самом деле не самый верхней уровень на странице - им является «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать - стань такой же высоты, как окно браузера.

Суммируем полученную информацию в небольшом кусочке кода:

Html, body, .container { height: 100%; }
Готово. Если вам интересно углубится в тему, как устроен viewport, я настоятельно рекомендую .

А что если у родительского элемента установлено свойство min-height, а не height?

Недавно, Роджер Йохансен (Roger Johansson) описал проблему с height: 100% , проявляющуюся, когда у родительского элемента не установлен height, но указан min-height. Я не хочу углубляться в сказанное в статье, а перейду сразу к выводам. Вам необходимо установить height: 1px для родителя, чтобы дочерний элемент смог занять всю высоту указанную в min-height.

Parent { min-height: 300px; height: 1px; /* Required to make the child 100% of the min-height */ } .child { height: 100%; }
Пример на jsFiddle .

Более подробно, с этим вопросом, вы можете ознакомится в статье Роджера Йохансена (Roger Johansson) .

Width: 100%

Теперь давайте разберемся с width: 100% . Для начала, небольшое уточнение: устанавливая свойство width: 100% , мы хотим, чтобы наш элемент занял всю ширину родительского элемента. Все стандартно.

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

Если добавить padding и/или border к элементу с width: 100% , то он перестанет помещаться в родительский элемент. Потому что появились padding и border и вот почему width должен был называться content-width. А теперь, пожалуйста, посмотрите на пример демонстрирующий вышесказанное.

Допустим, ширина родителя 25em, а дочернего элемента - 100% (от ширины родителя) и он также имеет padding равный 1em (1em справа и1emслева, всумме2em по горизонтали) и border размером в 0.5em (0.5 em справа и 0.5 emслева, всумме1em по горизонтали), что в итоге нам дает 25em (100%) + 2em + 1em = 28em.

Есть 4 возможных пути решения этой проблемы. Первый и, наверное, лучший способ - избегать свойства width: 100% , тем более что в данном случае оно абсолютно бесполезно. Если дочерний элемент блочный, то он и так займет всю ширину родителя автоматически (без проблем с padding`ами и border`ами). Но если мы работаем с inline-block элементом, то нам не удастся так просто решить эту проблему.

Мы можем заменить width: 100% на статичный размер. В нашем случае 25 - (2 + 1) = 22em. Само собой - это плохое решение, потому что нам нужно вычислять ширину вручную. Пойдем другим путем!

Третий способ - использовать calc() для расчета ширины: width: calc(100% - 3em) . Но оно тоже не подходит. Во-первых, нам все еще нужно вычислять размеры padding + border. Во-вторых, calc() плохо поддерживается браузерами (не работает в IE 8, Safari 5, Opera 12, родном браузере Android).

Идея номер четыре - использовать свойство box-sizing: border-box . Оно изменяет алгоритм расчета ширины и высоты элемента так, чтобы в них учитывались свойства padding и border. Отличная новость, заключается в том, что у box-sizing хорошая поддержка браузерами (IE8+, Opera 7+). А для всех остальных браузеров можно использовать polyfill .

Вывод: не используйте width: 100% без box-sizing: border-box .

Как не облажаться с z-index.

Все элементы на страницы позиционируются в трех плоскостях: кроме вертикальной и горизонтальной оси, существует дополнительная ось Z (глубина). Поначалу все выглядит очень просто - элементы с большим z-index находятся выше элементов с меньшим z-index. К несчастью, все гораздо сложнее. Я уверен, что z-index самое сложное css свойство за всю его историю. А также уверен, что проблемы связанные с z-index встречаются чаще других при работе с css. Надеюсь, что мы просветим возможные пути их решения.

Для начала. Свойство z-index не имеет эффекта на статических элементах. Чтобы иметь возможность перемещать элемент по оси Z, нам нужно изменить его позиционирование на relative, absolute или fixed.

Важно понимать в z-index то, что не все элементы в DOM дереве размещены на одном уровне. Это значит, что изменение z-index у элемента до очень большого значения, не гарантирует того, что он будет помещен на передний план. Это называется контекстом наложения.

Простыми словами, контекст наложения является, своего рода, группой на основе одного html элемента, у которого все дочерние элементы получают ту же позицию в контексте и такой же z-index. Изменения z-index у элемента может привести к перекрыванию им других элементов, так как вам необходимо. Вот как располагаются элементы в одном контексте наложения (снизу вверх):

1. Фон и границы элемента, формирующего контекст
2. Дочерние контексты наложения с негативным z-index (самый маленький первый)
3. Не позиционированные элементы
4. Позиционированные элементы со значением z-index равным auto или 0
5. Позиционированные элементы с положительным z-index (каждый следующий по порядку расположен выше предыдущего, при равенстве z-index)

Когда ситуация становится неприятной

Итак, мы рассмотрели основы z-index понимание которых сэкономит вам кучу времени, уж поверьте. К сожалению, их недостаточно. Тогда все было бы слишком просто.

Дело в том, что каждый контекст наложения имеет свою ось Z. Например, элемент A в контексте 1 и элемент B в контексте 2 не могут взаимодействовать через z-index. Это значит, что элемент A, как часть контекста наложения находящегося в самом низу общего контекста наложения, никогда не сможет перекрыть элемент B другого контекста, находящегося выше уровнем, даже с очень большим значением z-index.

Но, что еще хуже. Элемент html создает корневой контекст наложения. Затем, каждый не статично-спозиционированный элемент со свойством z-index не равным auto, также создает свой контекст наложения. Ничего нового. Но вот где все начинает рушиться: некоторые, никак не связанные с контекстом наложения css свойства, также создают новые контексты. Например, свойство opacity.

Все верно, свойство opacity создает новый контекст наложения. То же самое делают свойства transform и perspective. Хотя это не имеет никакого смысла, не так ли? Например, если у вас есть какой-нибудь элемент с opacity меньше 1 или с любой трансформацией, у вас потенциально может возникнуть проблема.

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

Давайте подведем краткий итог вышесказанного:

• Перед применением z-index убедитесь, что установили свойство position не равным static
• Не используйте более 5 цифр для значения z-index, это абсолютно бессмысленно; в большинстве случаев, значение z-index в районе 10, будет более чем достаточно
• Убедитесь, что элемент, который вы хотите перекрыть находится в том же контексте наложения.
• Если у вас все еще что-то работает не так, как должно, убедитесь в отсутствии трансформаций и opacity выше у родительских элементов.

В тему, я так же рекомендую к прочтению What No One Told You About Z-index от Филипа Волтона (Philip Walton) и официальную спецификацию css .

Борьба со схлопыванием отступов

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

К счастью, как правило, такое поведение и ожидается. Возможно, поэтому оно так и работает (так указано в спецификации css). Однако, иногда вы не хотите, чтобы вертикальные отступы схлопнулись. Чтобы понять как этого избежать, мы для начала посмотрим, почему так происходит. Схлопывание отступов может произойти в трех разных случаях.

Соседние элементы

Когда два соседних элемента имеют вертикальные отступы - они схлопываются до самого большого из них. Есть несколько способов предотвратить схлопывание:

• clear: left; float: left; (right то же работает)
• display: inline-block;

Блочная модель CSS в английском языке называется Box model (box - это коробка). Этот перевод немного помогает понять суть блочной модели. Суть в том, что при формировании страницы на экране используются блоки - прямоугольные области экрана.

Блочная модель CSS - это одна из основ для понимания CSS, модель форматирования документа.

Перед изучением CSS вы должны были изучить HTML, а значит вам должно быть известно что теги HTML делятся на блочные элементы и строчные элементы.

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

  И

  .
• Строчные элементы - теги которые не создают своих блоков, а влияют на отображение содержимого блока. Пример таких тегов - , , и другие.

Давайте на примере рассмотрим отличия этих групп элементов.

Блок тега p. Этот кусок текста выделен тегом em.

Этот пример наглядно показывает что теги

И

создают свои блоки. Каждый блок начался с новой строки. Для блока

была задана ширина и высота, а блок

Занял всю ширину экрана, его высота равна высоте его содержимого. Чтобы это было видно, для обоих элементов установлен жёлтый фоновый цвет.

Тег просто отформатировал текст внутри блока

Подробнее про блоки.

Любой блочный элемент имеет установленный набор свойств, которые можно менять при помощи CSS.

Основа блока - его контент или содержание, ширина поля контента задаётся свойством width , а высота свойством height . Но у блока есть и другие поля, они как листья капустны накладываются друг на друга.

Проще показать это в виде рисунка.

Мы видим, что кроме самого поля контента, у блока есть ещё три свойства:

• Внутренний отступ - padding - по английский "набивка". Набивка - то, что набито, чем заполнена внутренность чего-либо. padding - это часть блока от края контента до границы.
• Граница - border - по английский и есть "граница". Границу блочного элемента можно установить разными стилями: сплошной линией, точками, пунктиром; можно установить цвет границы. Подробно о том, как управлять свойством border речь пойдёт ниже.
• Внешний отступ - margin - по английски "маржа". В экономическом значении маржа значит разницу между себестоимостью и ценой.

В рамках этой статьи свойство outline мы рассматривать не будем. Только отмечу: на размер блока это свойство не влияет.

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

Блок тега div.

Блок тега p. Этот абзац имеет знаяения свойств по умолчанию.

Стиль: padding: 10px.

Стиль: margin: 30px.

Результат должен быть такой:

Рисунок 2. Работа примера №2.

Мы видим чёрную (black ) рамку толщиной 3px вокруг блока, созданного тегом

. Первый абзац отформатирован по умолчанию, за исключением фонового цвета. Во втором абзаце установлен внутренний отсуп (padding ) размером 10px , видно что вокруг текста площадь заливки фоновым цветом увеличилась. Третий абзац не имеет внутреннего отступа, но задан внешний отступ margin размером 30px . Мы видим что расстояне между этим и вторым абзацем больше, чем между вторым и первым - это работает внешний отступ.

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

Как устанавливаются фоновые цвета для этих свойств?

• Внутренний отступ - padding - всегда имеет цвет фона самого элемента, заданного в свойстве background-color .
• Граница - border - её цвет задаётся свойством border-color .
• Внешний отступ - margin - он всегда прозрачен, поэтому цвет этой области совпадает с фоновым цветом элемента родителя (в нашем случае это белый фоновый цвет элемента установленный по умолчанию).

Расширенные возможности управления свойствами блока

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

Рисунок 3. Блочная модель CSS.

Рассмотрим подробнее свойства блоков и приведём примеры их использования.

Внутренний отступ - padding

Внутренний отступ - padding - расстояние от внутреннего края границы до условного прямоугольника, ограничивающего контент блока. Так как внутренний отступ может быть разным у каждой стороны блока, то говорят «верхний внутренний отступ» или «отступ сверху». Стоит отметить что в разных книгах по CSS для свойства padding используются различные переводы, в некоторых он называется просто отступ, в других поле, а отступом называют свойство margin .

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

Результат должен быть такой:

Рисунок 4. Работа примера №3.

Мы видим красиво оформленный блок с внутренними отступами до границы.

Граница - border

Границы - это линии вокруг внутреннего содержимого элемента. Границу можно установить для всех сторон блока, или для любого числа. Для границы можно задать толщину, стиль и цвет. Для создания рамки (границы), как писалось ранее, в CSS существует свойство border . В этом свойстве можно прописать все характеристики рамки (толщину, стиль и цвет). А для создания границ на отдельных сторонах блока нужно воспользоваться свойствами border-top , border-right , border-bottom и border-left .

Результат выполнения кода должен быть такой:

Рисунок 5. Работа примера №4.

Внешний отступ - margin

Отступ - это пространство от границы блока до его внешнего края. Отступы устанавливаются свойством margin . Как и в случае с внутренними полями и границами, отступы можно задавать для любой стороны блока. Например, свойство margin-left управляет отступом блока с левой стороны.

Особенности внешних отступов.

• Внешний отступ всегда прозрачен. Он не принимает цвет фона или фоновое изображение установленное для блока, к которому он относится. Однако, он принимает фон родительского элемента.
• Внешние отступы суммируются. Если между блоками заданы отступы по 25px, то расстояние между ними будет не 50px, а 25px, так как внешние отступы накладываются друг на друга.
• Для внешнего отступа можно задавать отрицательное значение. Такое значение сдвигает блок, например объявление margin-left : -20px сдвинет блок влево на двадцать пикселей.
• Отступы можно задавать в процентах, такие отступы вычисляются от размера блока контента. Это будет делаться в отношении как горизонтальных, так и вертикальных отступов.

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.

Рассмотрим этот пример подробней. Результат его выполнения должен быть такой:

Рисунок 6. Работа примера №5.

Для тега

Тут задана рамка толщиной 1px. Это сделано для того, чтобы было видно где начинается область внешнего отступа этого тега.

Один тег

Помещён в блок

с установленным фоновым цветом. Видно что внешний отступ тега

Принял фоновый цвет тега

. А теги

Находящиеся вне этого блока, имеют белый цвет внешнего отступа, соответствующий фоновому цвету блока по умолчанию.

Последний, пустой абзац, имеет высоту height : 20px , он помещён в пример только для того, чтобы было лучше видно что расстояние между абзацами составляет 20px и равно высоте этого пустого абзаца. В таблице стилей для тега

Задано объявление margin : 20px , видно что внешние отступы абзацев сливаются и расстояние между абзацами равно не 40px, а 20px.

Ширина блока - составная величина, она складывается из суммы значений нескольких свойств:

• width - ширина содержимого блока;
• padding-left и padding-right - внутренний отступ слева и справа от содержимого;
• border-left и border-right - толщина границы слева и справа;
• margin-left и margin-right - внешний отступ слева и справа.

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

На рисунке 7 блок обозначен чёрной пунктирной линией.

Рисунок 7. Ширина блока.

Если в блоке значение width не задано в таблице стилей, то оно устанавливается по умолчанию как auto . В этом случае поле контента займёт всю доступную ширину (родительский блок или, если его нет, окно браузера), но размеры всех отступов и граница при этом сохранятся.

Посчитаем ширину блока на примере следующего стиля:

Width: 400px; /* Ширина блока */ padding: 5px; /* Отступ до границы */ border-width: 3px; /* Толщина границы */ margin: 7px; /* Внешний отступ */

Сложим все слагаемые, составляющие ширину блока:

Ширина блока = 400 + 5*2 + 3*2 + 7*2 = 430px.

Устаревшая блочная модель

Исторически так сложилось, что метод расчёта ширины блока описанный выше использовался не всегда. На данный момент он является стандартом, принятым концерном W3C. Но раньше свойство width не было равно полю контента, а представляло собой постранство блока, которое включает свойство border . Источником такой блочной модели была компания MicroSoft и на её основе работал браузер Internet Explorer до версии 7. На рисунке продемонстрировано сравнение двух блочных моделей.

Рисунок 8. Две блочные модели.

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

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

Свойство box-sizing

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

Подробно вникать в суть проблему не будем, это не уровень этой статьи. Тут только отмечу, что устаревшая система иногда оказывается полезной. Для возможности менять алгоритм блочной модели в CSS3 ввели полезное свойство box-sizing . При значении border-box ширина блока начинает включать поля и границы, но не внешние отступы. Таким образом, назначая свойству box-sizing значение border-box , мы можем задавать ширину блока width в процентах и спокойно указывать свойства border и padding нужной нам величины, не боясь, что изменится ширина блока.

При формировании высоты блока используется та же формула, что и при формировании ширины блока. Высота блока - это сумма высоты поля контента, границы, внутреннегот и внешнего отступов (верхних и нижних конечно же). Если значение свойства height не указано, то по умолчанию устанавливается значение auto , в этом случае высота поля контента вычисляется автоматически и зависит от самого контента.

На рисунке 9 показаны все свойства, из которых складывается суммарная высота блока, обозначенного чёрным пунктиром.

Рисунок 9. Высота блока.

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

Давайте сразу передём к примеру и рассмотрим случай, в котором свойствам блока width и height назначены значения 200% .

Блоку также задан фоновый цвет, чтобы была видна его площадь. Вот как он выглядит:

Рисунок 10. Работа примера №6.

Мы видим что по горизонтали образовалась полоса прокрутки, размер которой в два раза превышает размер окна браузера, т.е. блок по ширине всегда равен 200% от родительского элемента - окна браузера. Но во вертикали такого эффекта нет. Использование процентов для указания высоты не имеет смысла, так как высота высота родителя по умолчанию не существует и её надо указывать.

Блок с шириной = 200% и высотой = 100%.

Тут родительскому элементу для

- тегу , установлена высота величиной 50px, и высота для

установлена 100%. То есть этот тег имеет высоту 50px.

Рисунок 11. Работа примера №7.

Видно, что площадь окрашенная в цвет #F3F3D6 увеличилась. Если окно браузера ещё уменьшить по высоте, то появится вертикальная полоса прокрутки, чего в прошлом примере не было.

Если в этом примере Но как сделать так, чтобы задать блоку параметр height в процентах и это работало. Попробуйте изменить прошлый пример и для селектора body установить свойство height равное 100% . Такой пример работат не будет. Почему? Потому что для тега высота определяется относительно его родителя - тега , а там высота не задана. Значит 100% от ничего равно ничего. Чтобы решить эту проблему нужно написать такой стиль:

Блок с шириной и высотой = 200%.

Только установив высоту в 100% для тегов и мы сможем установить высоту в процентах для тега

и она будет работать.

Рисунок 12. Работа примера №8.

При работе с высотой блока следует помнить о ещё одной особенности, если контент превышает размер блока, то он выходит за его рамки. Вот пример такого кода:

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

На примере видно, что текст вышел за границы блока.

Рисунок 13. Работа примера №9.

Избежать подобного очень просто - достаточно не задавать высоту контента (height ). Впрочем, иногда нужно строго определить высоту блока. В этом случае можно использовать свойство overflow со значением auto . Это свойство будет в блоке создавать полосу прокрутки в случае, если размер контента привысит размер блока.

Добавим в стиль примера №9 свойство overflow со значением auto и результат будет таким:

Рисунок 14. Свойство overflow со значением auto.

У свойства overflow есть другое значение, которым также можно регулировать высоту блока - hidden (англ. скрытый). Это значение просто скрывает всё, что не влазит в установленные размеры блока.

Рисунок 14. Свойство overflow со значением hidden.

Минимальная и максимальная ширина элемента

В этой статье также уместно вспомнить свойства min-width и max-width устанавливающие минимальную и максимальную ширину элемента соответственно.

Свойство 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

Свойство max-width - устанавливает максимальную ширину элемента. Пример использования свойства max-width :

Прошли тысячелетия. Механизм, предназначенный для работы вечно, остановился. Системы жизнеобеспечения были повреждены.

Странник оглянулся вокруг. Во всех направлениях до горизонта была пустыня.

Минимальная и максимальная высота элемента

Аналогично есть свойства для назначения минимальной и максимальной высоты элемента: min-height и max-height .

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

width и height — ширина и высота элементов в css

С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

В качестве значений можно использовать любые доступные в css единицы измерения - например, пикселы (px), дюймы (in), пункты (pt) и др.:

p {width:200px; height:150px}

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

div {width:40%;}

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

Рассмотрим несколько примеров.

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

Результат:

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

Layer2 {
background: #eee;
width:250px;
}

Результат:

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

Теперь давайте зададим высоту и ширину абзаца в процентах:

Layer2 {
background: #eee;
width:50%;
height:50%;
}

Результат:

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

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

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина>
min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина>
max-height: <высота>

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

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

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

Layer2 {
background: #eee;
width:100px;
height:100px;
}

Результат:

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

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

Текст первого абзаца

Текст второго абзаца

Результат:

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

Теперь у первого абзаца ограничим ширину:

Текст первого абзаца

Текст второго абзаца

Результат:

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

Ну а теперь ограничим у первого абзаца и высоту:

Текст первого абзаца

Текст второго абзаца

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

overflow: visible|hidden|scroll|auto|inherit

По умолчанию overflow принимает значение visible, которое сообщает браузеру, чтобы он отображал содержимое не уместившееся в контейнере. Результат можно увидеть на примере выше.

Правило скрывает все, что не помещается в контейнере:

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

Текст первого абзаца

Текст второго абзаца

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

Текст первого абзаца

Текст второго абзаца

Результат:

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом отвечает за горизонтальную ось , а за вертикальную ось .

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

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей.

Рекомендуем почитать

Использование эквалайзера Windows

Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...

Скачать примеры Excel с формулами и функциями

Файлы *.xlsx с примерами вычислений формул и функций. А так же бесплатные...

Использование эквалайзера Windows

В операционных системах Windows, начиная с Vista, используется встроенный...

Наверх