Как сделать чтобы блок не выходил за границы родителя
Обновлено: 04.07.2024
Свойство переполнения CSS overflow контролирует, что происходит с содержимым, выходящим за границы элемента. Например вы создали div, для которого явно установили ширину 200px, но внутри него поместили изображение шириной 300px. Это изображение будет выступать за пределы div и по умолчанию будет видимым. Если вы установите значение overflow как скрытое – hidden, изображение обрежется до 200 px.
Значения
visible Содержимое не обрезается, когда выходит за пределы своего контейнера. Это значение по умолчанию. hidden Выходящий за границы контейнера контент будет скрыт. scroll Аналогично hidden, за исключением того, что добавляется полоса прокрутки, чтобы пользователи могли прокручивать скрытый контент. auto Если контент выходит за пределы своего контейнера, этот контент будет скрыт и появится полоса прокрутки. То есть в отличие от предыдущего значения полоса прокрутки появится только при необходимости. initial использует значение по умолчанию – visible . inherit перенимает значение переполнения от родительского элемента.
Текстовый контент естественным образом переноситься на новые строки (если не используется white-space ), поэтому текст редко может быть причиной переполнения. Переполнение чаще возникает, когда заданы явные значения ширины и высоты блока.
Visible
Если вы не настроили свойство переполнения, по умолчанию будет visible . Таким образом, в общем случае нет причин явно устанавливать это значение, если только вы не отменяете его более раннюю установку в другом месте.
На примере ниже выводится div , в котором находится текст. У этого div указана высота height:100px; и сделана синяя рамка, чтобы были видны границы. И хорошо видно, что хотя сам блок заканчивается нижней рамкой, текст идет ниже и выходит за его пределы. Все потому, что по умолчанию видимость при переполнении установлена в visible – видима.
Еще интересный момент в том, что даже если контент виден за пределами блока, это вылезающее содержимое не влияет на поток страницы. Например, под блоком с синей рамкой выведен блок с красной рамкой и прозрачным красным фоном. Видно, что текст за пределами первого контейнера не мешает второму контейнеру и тот примыкает вплотную к первому.
Говоря в целом: не стоит без особой причины устанавливать фиксированную высоту элементов.
Hidden
Это значение противоположность visible . Оно скрывает любой контент, выходящий за рамки контейнера. Повторим первый пример, но с примененным к контейнеру свойством:
Текст, который выходит за пределы div , перестал быть видимым.
Это особенно полезно при использовании динамического содержимого и возможности переполнения, способной вызвать серьезные проблемы с версткой. Например, вы выводите заголовки последних записей в определенном месте, для которого определен фиксированный размер. В этом случае если на сайте возникнет статья с длинным заголовком, не помещающемся полностью в указанное место, то скрыв “лишнюю” ее часть, вы покажете часть заголовка и сохраните верстку.
Scroll
Установка значения переполнения в scroll скроет содержимое за пределами поля, но создаст полосы прокрутки для просмотра скрытого содержимого.
Следует отметить, что с этим значением вы получаете И горизонтальную И вертикальную полосы прокрутки независимо от того, что для содержимого требуется только одна или другая.
Для iOS это значение будет работать с помощью -webkit-overflow-scrolling .
Значение auto похоже scroll , но оно решает вопрос получения полос прокрутки, только когда они вам нужны. Полосы прокрутки будут отображаться только в случае, если есть контент, который действительно выходит за пределы контейнера.
На примере ниже видно, с этим значением осталась только вертикальная полоса прокрутки.
overflow-x and overflow-y
Также можно управлять переполнением содержимого по горизонтали или вертикали с помощью свойств overflow-x и overflow-y . Например, в демонстрации ниже горизонтальное переполнение можно прокручивать, в то время как текст, выходящий за пределы высоты поля, скрыт:
При этом основное свойство можно использовать как составное и указывать значения сразу для оси X и Y таким образом:
Очистка Float
Как ни странно, одним из наиболее популярных способов использования overflow является очистка свойства float .
Проблема встречается в следующем: когда вы помещаете в элемент дочерний элемент с установленным свойством float (плавающий), то родительский элемент не растягивается, чтобы охватить дочерний элемент, а сворачивается, не учитывая его. Это бывает проблемой, например, когда у родительского элемента задан фон или рамка.
На примере это наглядно видно. Внутри родительского элемента (в синей рамке) помещен элемент с текстом и установленным свойством float . Родительский элемент при этом свернулся.
Элемент с установленным свойством переполнением (любое значение, кроме visible ) будет расширяться настолько, насколько необходимо, чтобы охватить все дочерние элементы внутри его, которые являются плавающими. Ниже тот же пример, но с установленным для родителя свойством overflow: auto :
Overlay
Есть еще одно значение свойства overflow: overlay , но оно не стандартизировано. Работает, как auto , но в отличие от него не изменяет размеры блока, то есть скроллинг при необходимости накладывается “поверх” элемента.
Сейчас мы решим 3 проблемы, которые рано или поздно начинают достигать начинающего веб-разработчика при попытках адаптировать сверстанный им сайт.
Проблема. Текст или другой контент начинает выезжать за пределы родительского блока при его сжатии.
Итак, первая проблема напрямую связана с неправильным указанием высоты родительских елементов страницы, в которых и находится тот контент, который начинает выезжать за пределы своего родительского блока.
Часто новички только изучая CSS начинают использовать такие свойства как height и max-height забывая о том, что при уменьшении экрана, контент, находящийся внутри блоков с такими свойствами начинает сжиматься и выходить в нижнюю часть блока (особенно это касается любого текста). Это как сжимать воздушный шар. Мы сжимаем шарик, давление внутри увеличивается и воздух давит на другие его части тем самым расширяя его в другом направлении. Тоже самое и происходит с текстом. Сжимая блок, он уменьшает пространство текста, а текст начинает уходит вниз, пробивая фиксированную высоту своего блока.
Решение. Избавьтесь от фиксированной высоты блоков при адаптации верстки! Для этого просто уберите значения height и max-height в блоках где задумывается их увеличение за счет текста внутри них. Из названий этих свойств видно, что они дают ограничения по высоте блока, а значит если текст достигнет их предела, он будет выходить за него. Не используйте значения height и max-height где нет в них никакой потребности. При адаптации вашей верстки у вас возникнут проблемы на этой почве.
Проблема. Картинка заднего фона не адаптируется под размер своего блока.
Весь нюанс заключается в том, что вы просто не дописываете нужные правила для заднего фона.
Решение. Добавить к блоку в котором стоит наш фон такую часть кода:
А теперь поясняю. Правило background-size: cover говорит браузеру, что размер картинки фона нужно наложить на всю площадь ее родителя при этом пропорционально растягивая её. Этим правилом мы фиксим проблему с ненужным для нас дублированием картинки фона, что превращает весь фон в страшную матрицу картинок при неестественном изменении размера родителя.
Строка кода background-position: center, в свою очередь, размещает картинку фона по центру своего родителя. Здесь ничего объяснять не нужно, это и так довольно легко для понимания.
ВАЖНО! Если вы таким способом делаете фон для какой либо секции или блока на сайте, который априори имеет больший размер картинки своего фона, эта картинка будет иметь ухудшенное разрешение. Это связано с тем, что те свойства, которые мы прописываем к фону заставляют картинку изменять свой размер пропорционально размеру своего родительского блока. Вообщем, просто запомните, что не стоит ставить картинку, например 800×600 фоном для блока размером 1920×1080. Люди увидевшие это будут лишены всяческого чувства сострадания по отношению к вам, когда вас встретят в 10 часов вечера на улице возле вашего дома с ломом в руках.
Как убрать горизонтальную прокрутку?
Проблема. На меньших экранах сайта появляется горизонтальная прокрутка хотя все елементы адаптированы исправно и не вылазят за пределы своих блоков.
Такая проблема может довольно часто появляться даже у опытных верстальщиков. Особенность этой проблемы в том, что иногда совершенно не понятно в чем кроется проблема появления прокрутки. Ты вроде поубирал ненужные марджины, правильно настроил ширину блоков относительно всей страницы, но злополучный скролл все не исчезает.
Решение. Необходимо добавить селектору body свойство overflow-x: hidden. В коде это выглядит так:
После этого, горизонтальная прокрутка будет отключена на всей странице сайта. Однако, учтите, что это свойство не воспринимают некоторые стандартные мобильные браузеры, в особенности, браузер Safari на IOS устройствах.
В этой статье мы рассмотрим причины возникновения проблем с переполнением в CSS и способы их решения. Мы также рассмотрим, как современные инструменты разработчика могут облегчить процесс выявления этих проблем и отладки кода.
Если вы фронтэнд разработчик, то вы, возможно, уже сталкивались с проблемой появления нежелательной горизонтальной полосы прокрутки в различных элементах сайта, особенно при выводе его на мобильных устройствах. Поскольку существует множество причин возникновения подобной проблемы, простого ее решения не существует. Некоторые находятся и устраняются быстро, а некоторые требуют определенного навыка работы с инструментами отладки.
Что такое проблема переполнения?
Прежде чем обсуждать проблемы переполнения, необходимо выяснить, что это такое. Проблема переполнения (overflow) возникает, когда на веб-странице появляется нежелательная горизонтальная полоса прокрутки, позволяющая пользователю просматривать некий контент в горизонтальной плоскости. Возникновение подобного явления может обуславливаться самыми различными факторами.
Это может произойти из-за непредвиденно широкого содержимого или элемента фиксированной ширины, который шире окна просмотра. Мы рассмотрим все причины в этой статье.
Как выявить переполнение
Важная часть решения этой проблемы заключается в том, чтобы заметить ее в первую очередь. Если мы знаем, когда и где это происходит, мы можем сосредоточиться на изучении этой части веб-страницы. Существуют различные способы обнаружения переполнения: от прокрутки вручную влево или вправо или с помощью JavaScript.
Давайте рассмотрим способы выявления переполнения.
1. Прокрутка влево или вправо
Первый способ обнаружить проблему переполнения – попробовать прокрутить страницу по горизонтали. Если у вас это получилось, то это явное предупреждение о том, что со страницей что-то не так.
Если вы можете прокручивать страницу влево или вправо, то здесь действует переполнение
2. Использование JavaScript, чтобы найти элемент, который шире тела страницы
Можно добавить сниппет кода в консоль браузера, чтобы выявить любые элементы шире тела страницы. Это удобно для страниц с большим количеством элементов.
3. CSS свойство outline
Применив CSS свойство outline ко всем элементам на странице, мы получим подсветку элементов, которые выходят за границы тела страницы.
Полоса прокрутки появляется, когда элемент выходит за пределы области просмотра
Можно сделать даже лучше. Есть скрипт, придуманный Эдди Османи (Addy Osmani), который добавляет к каждому элементу свойство outline случайного цвета.
4. Пометка "OVERFLOW" в браузере Firefox
У браузера Firefox есть полезная функция, которая сигнализирует о том, что данный элемент испытывает проблему переполнения. Хочется надеяться, что другие браузеры тоже добавят такую функцию!
Метка "Overflow" в инструментах разработчика в браузере Firefox
5. Удаление элементов веб-страницы
Еще один распространенный способ выявить проблемный элемент – это открыть инструмент разработчика браузера и начать удалять элементы один за другим. Как только переполнение исчезнет, то элемент, который вы только что удалили, скорее всего и содержит проблему. Этот метод может оказаться полезным в тех случаях, когда вы выявили проблему, но не знаете, с чем она связана.
Как только вы найдете, где происходит переполнение, вам будет легче сделать сокращенный тест для дальнейшей отладки.
Частые причины возникновения переполнения
Элементы фиксированной ширины
Одной из наиболее распространенных причин переполнения являются элементы фиксированной ширины. Строго говоря, не следует задавать фиксированную ширину тем элементам, которые должны отображаться в условиях изменяющегося размера окна просмотра.
Cхематичный пример вывода на мобильном устройстве, где элемент с фиксированной шириной выходит за границы окна просмотра
Использование flexbox без переноса
Как бы не был полезен flexbox, тем не менее, стремление предотвратить переход элементов на новую строку, когда для них недостаточно места, чревато неприятностями.
Здесь флекс элементы могут вызвать горизонтальное переполнение, если для них будет мало места для размещения в одной строке: Флекс элементы, вызывающие горизонтальное переполнение и появляющиеся за пределами окна просмотра
Обязательно используйте свойство flex-wrap: wrap , если предполагается, что флекс элемент будет отображаться в окне просмотра с изменяющимся размером.
CSS Grid
Когда вы используете разметку CSS Grid, то очень важно учитывать адаптивность макета. Возьмем следующую разметку:
Данный код отлично работает, но только до тех пор, пока ширина окна просмотра не станет меньше 300px. Когда это случится, возникнет переполнение.
Демонстрация переполнения, когда у грид элемента ширина 300px
Чтобы избежать возникновения подобной ситуации, используйте гриды только тогда, когда достаточно места. Также, можно использовать CSS медиа запросы следующим образом:
Длинные слова
Еще одной распространенной причиной переполнения становятся длинные слова, которые не помещаются в окне просмотра. Чаще всего это происходит на мобильных устройствах из-за их малой ширины окна просмотра.
Пример использования длинного слова, которое не помещается и не может поместиться в окно просмотра
Это особенно полезно, когда контент вводит пользователь. Отличным примером такого контента являются комментарии. Пользователь может вставить длинный URL-адрес в свой комментарий, и это должно обрабатываться свойством overflow-wrap .
Минимальный размер контента в CSS Flexbox
Еще одной интересной причиной переполнения является минимальный размер содержимого в Flexbox. Что это значит?
Еще один пример использования длинных слов, которые не помещаются в окно просмотра
Согласно CSS спецификации:
По умолчанию флекс элементы не будут уменьшаться ниже минимального размера содержимого (длина самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство min-width или min-height .
Это означает, что флекс элемент с длинным словом не будет уменьшаться ниже минимального размера содержимого.
Длинное слово переносится на новую строку, чтобы оставаться в окне просмотра
Минимальный размер контента в CSS Grid
Как и в случае с CSS Flexbox, у CSS Grid действует та же концепция минимального размера контента. При этом решение проблема переполнения несколько другое.
Пример "прорыва" гридов, когда контент не помещается в заданную ширину
Давайте исследуем проблему. Предположим, что у нас есть боковая и основная секции, разметка которых построена на CSS гридах.
Также, у нас есть полоса с прокручиваемым контентом, расположенная в основной секции и с разметкой на флексбокс.
Обратите внимание, что мы не используем свойство flex-wrap , потому что нам нужно, чтобы флекс элементы оставались на одной линии. Тем не менее, это не работает и вызывает переполнение.
Отрицательные отступы
Элемент, расположенный за пределами экрана, может вызвать переполнение. Обычно это происходит потому, что у элемента установлены отрицательные отступы.
В следующем примере у нас есть элемент с отрицательным отступом, в документе с ориентацией текста слева направо.
Элемент, расположенный за пределами экрана, показан справа
Интересно, что если разместить элемент с другой стороны, то переполнения не будет. В чем же дело?
Элемент, расположенный за пределами экрана, показан слева
Вот что говорится в CSS спецификации:
Пользовательские программы просмотра должны обрезать прокручиваемую область переполнения контейнеров прокрутки со сторон начала блока и области начало контента (таким образом, их поведение должно быть таким, как если бы у них не было прокручиваемого переполнения на этой стороне).
Так, для документов с ориентацией текста слева направо левая сторона окна как раз и является областью начала контента. В результате любой элемент, расположенный за границей экрана слева, будет обрезан, и переполнение не возникнет.
Таким образом, если необходимо убрать элемент за пределы экрана, не забудьте установить свойство overflow: hidden у его родителя, чтобы не было переполнения.
Изображения без свойства max-width
Если не позаботиться о больших изображениях заранее, то вы обязательно встретитесь с переполнением. Чтобы этого не происходило, убедитесь, что для всех изображений установлено свойство max-width: 100% .
Единицы измерения относительно окна браузера
Использование единиц измерения ширины относительно окна браузера в 100vw имеет оборотную сторону, которая выражается в возникновении переполнения, когда видна полоса прокрутки. На macOS значение 100vw отработает вполне нормально и не вызовет горизонтальную прокрутку.
На Mac OS, где полосы прокрутки скрыты, все работает нормально
В Windows полосы прокрутки выводятся по умолчанию, поэтому возникает переполнение.
На Windows есть горизонтальное переполнение (Горизонтальная прокрутка)
Пример страницы с окном просмотра в 100vw и 14px справа, зарезервированными под полосу прокрутки
Тем не менее, при помощи JavaScript мы можем измерить ширину окна просмотра, исключая полосу прокрутки.
Добавленные рекламные блоки
Добавленные на страницу рекламные блоки могут стать причиной переполнения, если их ширина больше ширины их родительского элемента. Чтобы предотвратить это, следует установить свойство overflow-x: hidden у родительского элемента рекламного блока.
Область просмотра мобильного устройства с переполнением, вызванным рекламным блоком, ширина которого больше ширины самой области просмотра
Тщательно проверяйте каждый рекламный блок на веб-сайте, чтобы он не стал причиной переполнения.
А хорошая ли идея устанавливать свойство overflow-x: hidden для тега body?
Установка свойства overflow-x: hidden , подобна наложению повязки без решения проблемы. Если у вас есть переполнение, то лучше решить саму проблему.
Кроме того, применение overflow-x: hidden к элементу body не является хорошей идеей, потому что тогда не будет работать свойство position: sticky .
Как избежать переполнения в CSS
Ниже представлены некоторые вещи, на которые следует обращать внимание, чтобы уменьшить вероятность возникновения проблемы переполнения в CSS.
Тестируйте с реальным контентом
Ничто не сравнится по эффективности с тестированием с реальным контентом. При этом вы сможете убедиться, что разметка сайта будет корректно работать с самыми различными типами контента.
Учитывайте пользовательский контент
Для таких компонентов, как комментарии, следует учитывать, как было описано выше, случаи, когда пользователь будет вставляет длинный URL-адрес или вводить длинные слова.
Осторожно используйте CSS Grid и Flexbox
Какими бы полезными ни были CSS grid и flexbox, при неправильном использовании они могут легко вызвать переполнение. Как мы уже обсуждали выше, если не использовать свойство flex-wrap: wrap , то можно легко получить проблему переполнение. То же случится и при использовании grid-template-columns: 1fr 350px , когда ширина экрана меньше 350px.
Работая над проектом сайта компании “Novrealty” я столкнулся с такой задачей как элементы, выступающие за границы блока. Вот Вам пара замечательных приемов, как это легко реализовать.
Вообще, во время верстки часто вспоминаешь дизайнера очень нехорошими словами. Потому как нарисовать-то он нарисовал, а вот как это всё творение сверстать – это уже головная боль верстальщика.
И так у нас есть несколько блоков, которые идут один за другим, и надо сделать так, чтобы самый левый выходил за границы блока в котором они все находятся.
Верстка с помощью position и oveflow
Первый прием – это комбинация CSS свойств position и overflow. Для этого, блоку, который должен выступать устанавливаем position : relative и сдвигаем его влево на 50 пикселов (50 пикселов, это ширина выступающей части) left: -50;
А чтобы после этого блока не осталось пустого пространства, установим width : 0. Теперь браузеры не резервируют место для этого блока (точнее резервируют 0 пикселов).
Ну а теперь чтобы стало видно, то что находится внутри блока (выступающие элементы) устанавливаем свойство overflow : visible. Оно позволяет видеть в блоке всё, что выходит за его границы, а так как ширина его зада ноль, то собственно это всё что в нем есть.
Этот прием я проверял на всех браузерах, работает отлично везде, кроме моего горячо любимого IE-6. Он не смотря на width:0 все равно оставляет место под блок.
Так что если Вам необходимо сверстать под IE-6, то следующий прием верстки как раз для вас.
Верстка с использованием position relative и absolute
И на самом деле мне этот способ нравится больше. Он намного проще, а вот мест, где его можно использовать просто не счесть. Он основан на комбинации CSS свойств position : relative и position : absolute.
Как известно, position : absolute задает жесткие координаты блока, относительно начала страницы, а все остальные блоки располагаются, так как будто этого вообще нет.
А теперь самое интересное! Если этот элемент находится в блоке с position : relative, то координаты он отсчитывает от левого верхнего угла этого блока. И достаточно просто задать left: -50, как наш элемент выедет нужное положение.
Читайте также: