Признак переполнения контейнера в HTML

CSS свойство overflow позволяет управлять реакцией контейнера (например, DIV) при его переполнении. В некоторых случаях бывает необходимо определить факт переполнения, чтобы выполнить какие то действия.

Переполнение контейнера наступает, когда его размеры фиксированы. Т.е. мы имеем CSS вида:

Как определить, что содержание контейнера выходит за его пределы, в данном примере имеет высоту более 100 точек?

Аналогично можно проверить переполнение контейнера по ширине.

А ещё лучше оформить эти проверки в виде функций:

Мало букафф? Читайте есчо !

Простые CSS анимации, которые оживят ваш сайт

Апрель 14, 2025 г.

Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...

Читать

Выполнение php кода через drush

Март 24, 2020 г.

Для отладки или выполнения какого то разового кода иногда требуется выполнить php код в системном окружении вашего сайта на Drupal. Без drush приходится добавлять код вроде следующего в файл темы (а в последствии его удалять от туда): [crayon-699ffbfb19952792762128/] ...

Читать

Бесконечные редиректы на WP сайте после включения HTTPS

Ноябрь 27, 2024 г.

Если сайт находится за неким прокси, который реализует SSL, а на веб-сервере при этом не настроен HTTPS протокол, то WP может начать бесконечный цикл переадресаций. Начинается это сразу после изменения URL домашней страницы в админке. Анамнез ...

Читать

Пропорциональное заполнение контейнера картинкой

Ноябрь 29, 2017 г.

Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки. Сейчас это актуально в связи с необходимостью поддержки отображения сайта на мобильных устройствах. ...

Читать
 

Комментарии к «Признак переполнения контейнера в HTML»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: