Почему появляется скролл, при уменьшении line-height?
Скачал normalize.css, подключил, появился скролл на несколько пикселей. Файл первый по запросу в гугле https://necolas.github.io/normalize.css/
Увидел, что скролл появляется из-за свойства:
html { line-height: 1.15; } |
html { line-height: 1.15; }
Вижу, что при добавлении этого свойства уменьшается расстояние, между строками. Почему тогда появляется скролл? Ведь размер контента наоборот уменьшился!
Вот код:
<div class="wrapper"> <header class="header">Header</header> <main class="main">Main</main> <footer class="footer">Footer</footer> </div> |
<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; } |
.wrapper { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; } .main { flex: 1 1 auto; }
Дополнительно:
Скролл не имеет отношения к line-height.
Можете самостоятельно проверить, отменяя это свойство в девтулзах.
Но в показанных вами стилях нет обнуления margin у body.
И именно из-за него появляется скролл: min-height: 100vh; + марджины = скролл.
В том и дело, что когда удаляю это свойство, скролл пропадает.
В которой будет видно, что при line-height: 1.15; есть скролл, а когда этого свойства нет, то и скролла нет.
Потому что прокрутка появляется не из-за line-height.
Ответы:
Столкнулся с аналогичной проблемой. При отключении line-height скролл то исчезал, то появлялся.
Решением проблемы стал поэлементный анализ страницы, то есть в dev tools проходитесь по каждому вложенному элементу и удаляете его (объекты, которые по вашей задумке должны быть на границе экрана и им сопутствующие трогать не надо, только вложенные), до тех пор пока скролл не пропадет.
В моем случае стили писались не с нуля, а с использованием PrimeNg и проблема была с header content footer, где в футере были кнопки, которые делали отступ вниз и из-за этого был скролл.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Появление скролла при уменьшении line-height может быть вызвано несколькими факторами. Один из них может быть связан с тем, что контент внутри блока становится слишком большим для отображения на экране без скролла из-за уменьшения интерлиньяжа (line-height).
Когда вы уменьшаете line-height, текст становится ближе друг к другу и меньше промежутков между строками. Это может привести к тому, что текст начнет перекрываться или выходить за пределы блока, особенно если текст содержит много контента или длинные строки.
Для решения этой проблемы вам следует убедиться, что ваш контент подстраивается под уменьшенный line-height. Вы можете попробовать уменьшить размер шрифта или отступы между абзацами, чтобы контент лучше вписывался в блок.
Также, важно учитывать размер контейнера, в котором находится текст. Если контейнер имеет фиксированную высоту и текст не помещается из-за уменьшенного line-height, то скролл может появиться автоматически.
Еще одним важным аспектом является использование свойства overflow в CSS. Если у вас есть контент, который выходит за пределы блока из-за уменьшенного line-height, вы можете применить свойство overflow: hidden; чтобы скрыть лишний контент или overflow: auto; чтобы добавить скроллбары.
Пример использования overflow в CSS:
.container { line-height: 1.2; overflow: auto; height: 200px; /* фиксированная высота контейнера */ }
Надеюсь, что эти рекомендации помогут вам решить проблему со скроллом при уменьшении line-height. Если у вас остались какие-либо вопросы, не стесняйтесь задавать!