100% высота body и появление вертикального скролла в CSS

Быстрый ответ

Чтобы избавиться от нежелательной вертикальной полосы прокрутки при использовании body с высотой 100%, следует обнулить стандартные отступы и поля, которые браузер назначает по умолчанию:

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow: auto;
}

Применяется универсальный селектор * для сброса отступов — это избавляет от нежелательной полосы прокрутки, вызванной потенциальным переполнением. Cвойство overflow: auto; для body активирует прокрутку только в случае, когда контент выходит за границы экрана. Оно делает присутствие полосы прокрутки зависимым от объема контента, а не неверной конфигурации интерфейса.

Анализ схлопывания отступов

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

Мастерство регулирования высоты с помощью calc

Функция calc() в CSS позволяет точно регулировать высоту элемента, учитывая имеющиеся отступы. Вот как можно задать высоту для контейнера #container, компенсируя отступы:

#container {
  height: calc(100% – 20px); /* Здесь 20px — это размер отступа */
}

Это гарантирует, что контейнер «впишется» в body, без вызова переполнения из-за отступов.

Визуализация

Можно представить применение высоты 100% к body как установку идеальной рамы на стене. Однако любое дополнение, например, стандартные отступы, может провоцировать переполнение. Сравнение "до" и "после" можем представить вот так:

Рамка + Кайма = [🖼️🎀]  У ой, полоса прокрутки...
Без Каймы = [🖼️]       Идеально!

Во избежание подобной ситуации следует применить:

html, body {
  height: 100%;
  margin: 0;
}

Так мы получаем идеально подогнанную "рамку" без уже лишних элементов, таких как полоса прокрутки.

Мастерство сброса стилей

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

Управление переполнением

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

.overflow-hidden {
  overflow: hidden;
}

Однако следует быть осторожным — такое скрытие может ухудшить доступность содержимого.

Поток и позиционирование

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

.centered-container {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Управляйте свойством float с осторожностью, чтобы не нарушить структуру макета, и всегда сбрасывайте отступы и поля, чтобы предотвратить возникновение проблем с этим свойством.

Проверка совместимости с браузерами

Помните, что некоторые старые версии браузеров могут не поддерживать функцию calc(). Поэтому перед применением проверьте совместимость на сайте Can I use.

Полезные материалы

1. Модель "box" в CSS на w3schools
2. Свойство height в CSS на MDN
3. Трюк с использованием единиц viewport на мобильных устройствах на CSS-Tricks
4. Установка высоты body равной 100% высоты браузера на Stack Overflow
5. Normalize.css: обеспечение единообразного отображения элементов в разных браузерах
6. Свойство overflow в CSS на w3schools
7. Функция calc() в CSS на MDN