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

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


26 июля 2010, 16:05. Разместил: Design FactoRy
Вероятно, это тот момент 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! */
}

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

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