@Kolya112151

Почему появляется скролл, при уменьшении line-height?

Скачал normalize.css, подключил, появился скролл на несколько пикселей. Файл первый по запросу в гугле https://necolas.github.io/normalize.css/
Увидел, что скролл появляется из-за свойства:
html {
  line-height: 1.15;
}


Вижу, что при добавлении этого свойства уменьшается расстояние, между строками. Почему тогда появляется скролл? Ведь размер контента наоборот уменьшился!

Вот код:
<div class="wrapper">
    <header class="header">Header</header>
    <main class="main">Main</main>
    <footer class="footer">Footer</footer>
</div>


.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main {
    flex: 1 1 auto;
}
  • Вопрос задан
  • 121 просмотр
Пригласить эксперта
Ответы на вопрос 1
@Famouse
Столкнулся с аналогичной проблемой. При отключении line-height скролл то исчезал, то появлялся.

Решением проблемы стал поэлементный анализ страницы, то есть в dev tools проходитесь по каждому вложенному элементу и удаляете его (объекты, которые по вашей задумке должны быть на границе экрана и им сопутствующие трогать не надо, только вложенные), до тех пор пока скролл не пропадет.

В моем случае стили писались не с нуля, а с использованием PrimeNg и проблема была с header content footer, где в футере были кнопки, которые делали отступ вниз и из-за этого был скролл.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
//stablecode Вена
от 250 000 ₽
Фрамир Санкт-Петербург
от 80 000 ₽
ITooLabs Тула
от 35 000 до 40 000 ₽
28 февр. 2024, в 23:53
1000 руб./за проект
28 февр. 2024, в 23:20
10000 руб./за проект
28 февр. 2024, в 22:51
15000 руб./за проект