Использование свойства overflow CSS

Использование свойства overflow CSS

Приветствую вас дорогие друзья!

В одной из прошлых статей я рассказывала о наиболее часто используемых CSS-свойствах.

С данной статьей вы можете познакомиться по этой ссылке: Основы CSS. Базовые свойства

В этой статье я упоминала о свойстве overflow CSS, которое предназначено для управления контентом, расположенном в блочных элементах.

Сегодня я хочу более подробно остановиться на данном свойстве и разобрать примеры его использования на практике.

Управление отображением контента в блоке свойством overflow CSS

По умолчанию для всех блочных элементов overflow CSS имеет значение visible. При данном значении отображается все содержимое блока, даже в том случае, если контент выходит за пределы заданных размеров.

Для overflow CSS можно задать следующие значения:

  • hidden — отображение контента только внутри блока, а остальная часть обрезается
  • scroll — добавляет полосы прокрутки по вертикали и горизонтали
  • auto – добавление полос прокрутки только в случае, если контент выходит за границы блока
  • inherit – наследование значений родительского блока

Больше всего возникает проблем с маленькими по размеру блоками, например, такими как названия товаров в каталоге интернет-магазина. Как правило, на начальном этапе они выглядят вот так:

Отображение товаров в каталоге

Из-за того, что у товаров разные по длине названия, карточки имеют разную высоту, и это выглядит очень не красиво.

Если мы просто ограничим высоту бока с названием у нас получится вот так:

Блок с ограниченной высотой

Даже при заданном размере блока с названием, текст все равно выходит за его пределы и налезает на цену товара. Подобные случаи встречаются довольно часто и для решения этой проблемы нам нужно сделать следующее:

Мы добавляем для блока с названием товара свойство overflow CSS со значением hidden. В данном случае будет отображаться только та часть контента, которая находится в пределах блока. Все остальное будет обрезаться. Вот что получиться:

Использование свойства overflow CSS

Как видите, в обеих карточках товара название имеет одинаковую высоту, которая не будет изменяться ни в случае с еще большим названием, ни при изменении размера экрана устройства, с которого просматривают данный сайт.

Добавление полос прокрутки для блоков небольшого размера свойством overflow CSS

Давайте рассмотрим ситуацию, когда у вас есть блок с ограниченной высотой, но в нем нужно поместить контент произвольного размера, и возможно, что данный контент будет намного больше размера блока.

Например, у нас есть всплывающая корзина товаров в интернет-магазине. Если в нее добавить большое количество товаров мы получим вот такой результат:

Контент выходит за границы блока

Товаров так много, что они не помещаются на видимую часть страницы, и у посетителя нет возможность нажать на кнопку «Оформить заказ». Это очень не красиво и не удобно.

Выходом из данной ситуации является ограничение максимальной высоты для блока с товарами, и добавление вертикальной полосы прокрутки для него. Для этого мы задаем следующие стили для этого блока:

Свойство overflow-y CSS — это то же самое свойство overflow, но предназначенное для управления контентом только по вертикали. Есть так же специальное свойство для управления контентом по горизонтали — overflow-x. Они имеют такой же набор значений, как и базовое свойство.

В данном случае мы добавили для overflow-y значение auto, которое добавляет полосы прокрутки по вертикали только при необходимости.

Вот что у нас получится:

Корзина с малым количеством товара

Когда в корзине мало товаров, то нет никакой полосы прокрутки, и блок подстраивается по высоте, под количество товаров.

Добавление полос прокрутки overflow-y CSS

При большом количестве товаров, появляется полоса прокрутки, но при этом блок не превышает максимальной высоты.


Надеюсь, показанные в данной статье приемы работы со свойством overflow CSS поможет вам в будущем при создании вашего сайта.

Не забудьте оставить свой комментарий под статьей и поделиться своим опытом по использованию данного свойства или решению подобных проблем. Если вам понравилась данная статья, обязательно поделитесь ею со своими друзьями в социальных сетях.

Желаю вам успехов! До встречи в следующих статьях!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

4 комментария

  1. //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif
    Хорошая статья. Спасибо. //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif
    Хотя никогда не приходилось создавать корзину в модальном окне, возможно пригодится.
    Я обычно убираю в миникорзине все, а оставляю только общую стоимость.

    • И Вам спасибо что заглянули на мой сайт!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif