Якщо ви працюєте з CSS, ви, можливо, зіткнулися з ситуацією, коли ваша веб-сторінка має небажаний переповнення, особливо по вертикалі. Це може статися, коли елементи неправильно розміряються або позиціонуються, що спричиняє вихід сторінки за межі очікуваного вьюпорту. Давайте розберемося, чому це відбувається і як це виправити.
Ситуація: Переповнення через стандартний відступ для тега body
У наведеному прикладі ми встановлюємо висоту сайдбара рівною 100% висоти вьюпорту за допомогою одиниці 100vh, що означає "100% висоти вьюпорту".
sidebar
``` На перший погляд все виглядає добре — сайдбар має займати всю висоту вьюпорту, і не повинно бути переповнення. Але якщо ви запустите це в браузері, ви помітите, що сторінка має вертикальне переповнення, тобто вміст виходить за межі нижньої частини вьюпорту.
## Що викликає переповнення?
Отже, чому це відбувається? Причина криється в маленькому, але важливому аспекті: **стандартний відступ для елемента** `body`.
## Стандартний відступ для елемента body
Більшість веб-браузерів мають вбудовані стилі (так звані **стилі користувацького агента**) для різних елементів HTML, включаючи елемент `body`. Ці стандартні стилі гарантують, що вміст буде відображатися таким чином, щоб його було візуально зручно читати, навіть якщо не застосовуються індивідуальні стилі.
Один з таких стандартних стилів, які багато браузерів застосовують до елемента `body`, — це відступ, зазвичай близько **8px**. Цей відступ додає додатковий простір навколо країв тіла, відсуваючи вміст від країв вікна браузера.
Цей невеликий відступ, у поєднанні з вашою настройкою висоти `100vh` для `.sidebar`, спричиняє вертикальне переповнення. `100vh` змушує сайдбар займати всю висоту вьюпорту, але відступ тіла створює додатковий простір, що призводить до того, що сторінка виходить за нижній край екрану.
## Як це виправити
Щоб виправити цю проблему, все, що вам потрібно зробити — це **скинути відступ для елемента body**. Встановивши відступ для `body` рівним `0`, ви усунете зайвий простір, і `.sidebar` займатиме рівно 100% висоти вьюпорту без переповнення.
## Рішення: Скидання відступу
Щоб виправити проблему з переповненням, просто додайте наступне CSS правило для скидання відступу для елемента `body`:
body {
margin: 0;
}
```
Це ефективно усуне небажаний простір навколо елемента body і забезпечить, щоб .sidebar займала всю висоту вьюпорту, як це було задумано.
Ось оновлена версія коду:
sidebar
```
## Розуміння одиниць вьюпорту (vh)
Якщо ви новачок у використанні одиниці `vh`, це одиниця вимірювання, яка базується на **висоті вьюпорту**. Одна одиниця `vh` дорівнює 1% висоти вьюпорту. Отже, `100vh` означає повну висоту вікна браузера, незалежно від вмісту.
У нашому прикладі, встановивши `.sidebar` на `height: 100vh;`, ми гарантуємо, що вона займе всю висоту вьюпорту.
Однак стандартний відступ для елемента `body` спричиняв невелику різницю, відсуваючи вміст вниз і викликаючи переповнення.
## Чому це відбувається
Браузери мають ці стандартні стилі, щоб створити більш привабливий макет за замовчуванням, коли не застосовуються кастомні стилі. Відступ навколо елемента `body` допомагає забезпечити наявність простору навколо вмісту сторінки, роблячи його більш зручним для читання. Однак, коли вам потрібно точно контролювати ваш макет, особливо з елементами, що займають всю висоту, ці стандартні відступи інколи можуть заважати, як ми бачили в цьому випадку.
## Джерела:
[
## Що встановлює відступ 8px на моїй сторінці?
### Привіт усім! Я маю сторінку, на якій, як показує мій інспектор, встановлений відступ 8 px через стиль користувацького агента, але…
www.sitepoint.com
](https://www.sitepoint.com/community/t/what-is-setting-an-8px-margin-on-my-page/309002/2?source=post_page-----fabb1304109d--------------------------------)
Перекладено з: [Understanding Vertical Overflow in CSS and How to Fix It](https://medium.com/@oumuamuaa/understanding-vertical-overflow-in-css-and-how-to-fix-it-fabb1304109d)