В BODY есть элемент DIV с заданной шириной width.
Задача — написать код, который «распахнет» DIV по ширине на всю страницу.
Исходный документ (DIV — красный):
.
Код документа: tutorial/browser/dom/metric/bodywidth-src/index.html.
Расширить нужно точно по ширине, чтобы красный DIV не вылез за границы BODY.
P.S. Пользоваться следует исключительно средствами JS, при этом не подглядывая в стили. То есть, код должен быть универсален и не ломаться, если цифры в CSS станут другими.
P.P.S. После того, как решите… Будет ли ваше решение работать, если у красного DIV стоит position:absolute? Если нет, то почему и как его поправить?
Вначале рассмотрим неверный вариант.
Он выглядит так:
elem.style.width = '100%';
Если вы его попробуете, то увидите, что элемент начинает вылезать за рамки родителя.
Так происходит потому, что ширина — это то, что внутри padding. То есть, ставя ширину в 100%, вы говорите: «внутренняя область должна занимать 100% доступной ширины". А на padding остаётся 0%`. В результате поля вылезают наружу.
Правильное решение через clientWidth.
Доступную внутреннюю ширину родителя можно получить, вычитая padding из clientWidth, и присвоить элементу:
var bodyClientWidth = document.body.clientWidth; var style = window.getComputedStyle ? getComputedStyle(elem, '') : elem.currentStyle; *!* var bodyInnerWidth = bodyClientWidth - parseInt(style.paddingLeft) - parseInt(style.paddingRight); */!* elem.style.width = bodyInnerWidth + 'px';
Этот вариант сломается, если в IE<9 значение padding указано не в пикселях. Получение пикселей из процентов и других единиц измерения рассмотрено в главе Стили и классы, getComputedStyle.
Правильный вариант с CSS.
Самое лучшее решение получится, если вспомнить, что элемент и сам рад растянуться по всей доступной ширине, и делает это по умолчанию.
Достаточно вернуть ему стандартный алгоритм вычисленя ширины, установив width: auto:
elem.style.width = 'auto';
Но.. Это не будет работать для элементов, которые сами по себе не растягиваются, например в случае position: absolute или float.
Такой элемент можно расширить, используя предыдущее решение.
Документ с обоими решениями: tutorial/browser/dom/metric/bodywidth/index.html.