Блок на всю ширину екрана в CSS

Вивчаємо створення фіксованого блоку на всю ширину екрана за допомогою position: fixed та width: 100%.

Блок на всю ширину екрана в CSS

Фіксований елемент може займати всю ширину вікна браузера. Для цього потрібно задати йому position: fixed та ширину width: 100%.

Найчастіше такий прийом використовується для створення верхнього меню, панелей навігації та інформаційних блоків.

Приклад фіксованого блоку

<div id="elem"></div>

<div id="content">
  some long text
</div>

#elem {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100px;

  border: 1px solid green;
}

#content {
  margin: 0 auto;

  width: 300px;

  text-align: justify;
  font: 16px Arial;
}

Фіксована верхня панель

Такий блок залишається зверху навіть під час прокручування сторінки.

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
}

position: fixed закріплює елемент у вікні браузера.
top: 0 притискає блок до верхнього краю.
left: 0 притискає блок до лівого краю.
width: 100% розтягує блок на всю ширину.

❗ Важливо:

При створенні фіксованої верхньої панелі часто потрібно додати верхній відступ для основного контенту, щоб він не ховався під блоком.

#content {
  margin-top: 100px;
}

Практичні завдання

📌 Завдання:

№1. Створіть блок висотою 80px.
№2. Зробіть його position: fixed.
№3. Розтягніть блок на всю ширину екрана.
№4. Додайте текст і перевірте роботу під час прокручування.

💡 Показати підказку

Для фіксованого блоку на всю ширину використовуйте top: 0, left: 0 та width: 100%.

✅ Показати відповідь

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
}