CSS width 100%. Блок, який займає всю широту веб-сторінки.

У сучасній верстці на веб-сторінках часто можна зустріти блоки, які займають 100% ширини сторінки.

Це виглядає так:

Давайте розберемося, яким чином можна досягти такого ефекту.

Наприклад, давайте розглянемо таку ситуацію.

Блок, який має зайняти 100% ширини.

Дивимося на результат, що вийшов.

Більше моїх уроків з HTML, CSS та верстки сайтів тут.

Загалом добре, але з боків блоку видно невеликі відступи, які псують усю картину. Хотілося б їх усунути.

Перше, що спадає на думку, це привласнити блоку властивість width:100%. Але це ніяк не змінить ситуацію. Можете самі в цьому переконатись.

Блок, який має зайняти 100% ширини.

Тому властивість width:100% можете сміливо прибирати.

У чому реальна причина таких відступів?

Справа в тому, що блок div, ширину якого ми хочемо зробити 100%, зберігається в двох батьківських елементах body і html. За замовчуванням, браузери задають їм певні значення властивостей padding і margin.

Для того, щоб вирішити проблему, потрібно лише обнулити ці відступи. Зробити це дуже просто:

Дивимось, як виглядає блок тепер.

Все чудово, простір, що був з обох боків, був прибраний.

Більше моїх уроків з HTML, CSS та верстки сайтів тут.

Щоб залишити повідомлення, зареєструйтесь/увійдіть на сайт через:

Ширина блоку

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

• width - Ширина контенту, тобто вмісту блоку;
• padding-left та padding-right - поле зліва і праворуч від контенту;
• border-left та border-right - товщина кордону зліва і праворуч;
• margin-left і margin-right - відступ ліворуч і праворуч.

Якісь властивості можуть бути відсутніми і в цьому випадку на ширину не впливають.

1. Ширина блоку

Якщо значення width не задано, воно за замовчуванням встановлюється як auto . У цьому випадку ширина блоку буде займати всю доступну ширину при збереженні значень полів, меж і відступів. то ширина контенту браузера.

Допустимо, для шару написаний наступний стиль.

width: 300px; /* Ширина шару / / margin: 7px;

Ширина шару відповідно до цього запису дорівнюватиме 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).

Приклад 1. Ширина блоку

HTML5 CSS3 IE Cr Op Sa Fx

Ширина шару 100%

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

Вкладені шари

Використання властивості box-sizing всім добре, крім того, що не працює у старих версіях IE. Якщо ви верстаєте сайт з урахуванням IE7 та IE6, вам підійде старий перевірений метод із вкладенням шарів. Ідея проста - для зовнішнього блокового елемента задається тільки необхідна ширина, а для вкладеного блоку все інше - поля, межі та відступи. Оскільки за замовчуванням ширина блоку дорівнює доступній ширині батька, вийде, що блоки в якомусь сенсі накладаються один на одного, при цьому фактична ширина комбінованого елемента буде чітко задана. У прикладі 2 показано використання вкладених шарів.

Приклад 2. Вкладені шари

HTML5 CSS 2.1 IE Cr Op Sa Fx

 . wrap < width: 50%; /* Ширина */ >.wrap div

Ширина шару 100%

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

Мал. 2. Ширина блоку у відсотках

Перевагою вкладених шарів є використання відступів (box-sizing їх не враховує), універсальність методу, також те, що фон за бажанням можна додавати до одного або іншого шару. Тим самим змінюється зовнішній вигляд елементів, це особливо актуально при включенні фонових малюнків. З недоліків методу можна відзначити включення додаткового блоку, що ускладнює структуру коду, особливо при частому застосуванні методу. Але це можна вважати дрібницею порівняно з перевагами.