По какой причине в данном случае появляется переполнение контента?
Здравствуйте!
<div class="wrapper"> <div class="overflowed"> Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Ab delectus optio libero dicta odit quidem pariatur tempora hic amet earum repudiandae esse voluptates consequuntur nesciunt aliquam, vero doloremque et vitae. </div> </div> |
<div class="wrapper"> <div class="overflowed"> Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Ab delectus optio libero dicta odit quidem pariatur tempora hic amet earum repudiandae esse voluptates consequuntur nesciunt aliquam, vero doloremque et vitae. </div> </div>
*{ box-sizing: border-box; margin: 0; padding: 0; font-family: impact; } body{ width: 100vw; height: 100vh; background-image: linear-gradient(45deg, black, #454545); } .wrapper{ max-width: 1280px; margin: 25px auto; } .overflowed{ color: #fff; } |
*{ box-sizing: border-box; margin: 0; padding: 0; font-family: impact; } body{ width: 100vw; height: 100vh; background-image: linear-gradient(45deg, black, #454545); } .wrapper{ max-width: 1280px; margin: 25px auto; } .overflowed{ color: #fff; }
когда у элемента <div class="wrapper"> убираешь отступы (margin) сверху и снизу то прокрутка пропадает.
Почему так получается, что прокрутка по оси Х и Y появляется от маржинов сверху и снизу?
Дополнительно:
Поддерживаю всё, что сказал Сергей в ответе.
И плюс дополнительный вопрос: зачем вам нужно указывать ширину body. Если с ней ничего не делать, то и так всё будет хорошо. Нужно только обнулить margin у body
потому что 100vw != 100%
100vw - это ширина окна вместе с полосой прокрутки
100% - это ширина окна без учета полосы прокрутки
Как только появляется вертикальный скролл 100vw у body становится больше 100% контентной части
Поменяйте у body ширину на 100%
- ах, да, надо наверное еще пояснить почему в принципе появляется скролл? =))
Есть такая штука - называется схлопывание внешних отступов (margin collapsing)...Хотел сам описать, но пожалуй вот здесь все доступно описано
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...В данном случае отступ у wrapper объединяется с отступом (нулевым) у body и body съезжает вниз на такую же величину. А так как он высотой в 100vh то появляется скролл.
- Решение:
1. Сделать не марджин в wrapper а такой же паддинг у body
2. Или задать body 1px прозрачную рамку - Сергей delphinpro, про колапсинг прочитал , в целом ничего сложного для понимания, но хоть убей не понимаю, почему , когда задаю wrapper - margin-top: 20px; появляется скролл по горизонтали ну вертикальный скролл понятен, типа враппер отталкивается не от бади а на самом деле от условного родительского блока для боди, и то что избежать это можно тремя способами (текст внутри бади, бордер у бади или паддинг) НО я внатуре не врубаюсь , почему появляется горизонтальный то скролл, если я задаю чисто верхний маржин ! Оо
- Muranx, а про горизонтальный я в ответе написал.
смотрите на конкретном примередопустим окно развернуто на весь монитор и имеет ширину 1920 пикселей
кода вы задаете body { width: 100vw; } - ширина body будет 1920 пикселей
Когда появляется вертикальный скроллбар, который допустим шириной 20 пикселей, то ширина боди по прежнему остается 1920 пикслей, но доступного пространства в окне на 20 пикселей меньше, чем 1920, отсюда и скролл.
Так работает единица vw
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Переполнение контента может возникать по разным причинам, и важно понять, что именно приводит к этой проблеме в вашем конкретном случае. Однако, в общем, переполнение контента обычно происходит из-за того, что содержимое на странице превышает доступное пространство для его отображения.
Если у вас возникает проблема с переполнением контента, вот несколько возможных причин и способы их решения:
1. **Недостаточное пространство для контента**: Проверьте, есть ли у вас достаточно места на странице для отображения всего контента. Может быть, вам нужно увеличить высоту блока или уменьшить размер шрифта.
2. **Избыточное содержимое**: Проверьте, нет ли на странице лишнего контента, который можно убрать или сократить. Иногда проблему можно решить путем оптимизации текста или изображений.
3. **Неадаптивный дизайн**: Если ваш сайт не адаптирован для различных устройств и разрешений экранов, это также может привести к переполнению контента. Удостоверьтесь, что ваш дизайн отзывчив и адаптируется под разные размеры экранов.
4. **Неправильное использование стилей CSS**: Иногда переполнение контента может быть вызвано неправильными стилями CSS, которые не учитывают размеры элементов на странице. Проверьте ваши стили и убедитесь, что они корректно определяют размеры и расположение элементов.
5. **Использование фиксированных размеров**: Если вы используете фиксированные размеры для элементов на странице, это может привести к переполнению контента на устройствах с меньшим разрешением. Рекомендуется использовать относительные размеры или адаптивный дизайн.
Прежде чем принимать какие-либо меры, важно провести тщательный анализ страницы и идентифицировать конкретные проблемные места, которые приводят к переполнению контента. После этого можно приступить к исправлению проблем и обеспечить более комфортное отображение контента на вашем сайте.