—»     —»   CSS: Как работает и как использовать правильно параметр «width: 100%»
  Раздел: CSS/Style Sheets   Комментариев: 2  

CSS: Как работает и как использовать правильно параметр «width: 100%»



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

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

Начнем сначала: Блокам не нужен параметр width: 100%

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

CSS: Как работает и как использовать правильно параметр «width: 100%»

Большинство CSS разработчиков понимают это, но нам показалось, что указать данное правило здесь не было бы лишним.

Что это на самом деле значит

Когда вы применяете к элементу параметр CSS width: 100%, вы как будто говорите ему: «Пусть ширина этого элемента будет равна точной ширине его родительского элемента – но только если у его родительского элемента указан точный параметр ширины». Так что, если у вас есть родительский элемент шириной в 400 пикселей, то дочерний элемент, которому в качестве параметра ширины было указано 100%, будет так же 400 пикселей в ширине, но здесь еще нужно учитывать отступы и наполнение, которые были указаны для родительского элемента. Изображение ниже может наглядно отобразить это:

CSS: Как работает и как использовать правильно параметр «width: 100%»

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

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

Нужно ли это использовать?

Применение width: 100% к блочным элементам в 99% случаев не обязательны, к тому же, в некоторых случаях они могут привести к неожиданным результатам. Единственный случай, когда стоит применять данный параметр, это когда элемент наследует значение параметра ширины, который вам нужно поменять на тот, который требуется вам. Но даже в этом случае, корректнее было бы использовать параметр «width: auto», который является стандартным для блочных элементов.

Параметры высоты следуют тому же принципу (во всех браузерах!)

Этот маленький урок будет в роли напоминалки об одном препятствии в разметке CSS – когда невозможно задать элементу параметр высоты, который заполнял бы весь родительский элемент, если родительскому элементу (как вы уже догадались) не задан точный параметр высоты. Различие лишь в том, что тут не будет работать значение auto, и вместо него потребуется использовать параметр «height: 100%».

Стоит отметить, что во всех браузерах (даже в IE6/7) параметр высоты в процентах используется точно также (за исключением различных багов IE), так что, как только вы укажете точную высоту родительского элемента, дочерний элемент сразу растянется на всю высоту.

Памятка: Remainder имеет значение

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

#element {
    width: remainder; /* not valid, but I wish it was! */
}

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

Что вы думаете? Пользовались ли вы когда-нибудь процентными значениями ошибочно, и желали ли больше никогда не сталкиваться с использованием параметров данного типа, так как они приводили к совсем никчемному результату? Конечно, всегда лучше, когда человек старается изучить подробнее то, с чем у него возникли проблемы.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 21195   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 26 июля 2010 @ 16:39
Написал: snetcher — группа: Читатели  
На сайте с: 5.05.2010   |   Публикаций: 0   |   Комментариев: 11
ICQ: 154536636
Ситуацию исправит вложенный div которому и назначаются padding/margin. Конечно добавляется лишняя обертка, но зато, поведение блоков, к которым применены (отличные от назначенных по умолчанию) значения высоты/ширины, становится предсказуемым.
Комментарий #2: 26 июля 2010 @ 17:35
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3303   |   Комментариев: 500
ICQ: --- не указано ---
snetcher, согласен.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2019    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031