Свойство overflow

Свойство «overflow»

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.

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

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow.

Возможные значения

  • visible (по умолчанию)
  • hidden
  • scroll
  • auto

visible

Если не ставить overflow явно или поставить visible, то содержимое отображается за границами блока.

Например:

visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа Этот текст вылезает снизу Этот текст вылезает снизу Этот текст вылезает снизу Этот текст вылезает снизу

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

hidden

Переполняющее содержимое не отображается.

hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа Этот текст будет обрезан снизу Этот текст будет обрезан снизу Этот текст будет обрезан снизу Этот текст будет обрезан снизу

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

auto

При переполнении отображается полоса прокрутки.

auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу

scroll

Полоса прокрутки отображается всегда.

scroll Переполнения нет.

То же самое, что auto, но полоса прокрутки видна всегда, даже если переполнения нет.

overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto Этот текст вылезает снизу Этот текст вылезает снизу Этот текст вылезает снизу Этот текст вылезает снизу

Итого

Свойства overflow-x/overflow-y (или оба одновременно: overflow) задают поведение контейнера при переполнении:

visibleПо умолчанию, содержимое вылезает за границы блока.hiddenПереполняющее содержимое невидимо.autoПолоса прокрутки при переполнении.scrollПолоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float'ы. Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство «float».

Источник: https://learn.javascript.ru/overflow

О свойстве overflow | css-tricks по-русски

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

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

Обратите внимание

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

Всего существует четыре значения для этого свойства: visible (по умолчанию), hidden, scroll и auto. Также есть родственные свойства overflow-y и overflow-x, которые используются гораздо реже. Давайте рассмотрим поведение элементов с фиксированными размерами для каждого значения overflow и обсудим общие случаи использования.

Visible

Если вы не укажете свойство overflow, то по умолчанию оно будет равно visible. Итак, в основном, нет смысла явно устанавливать свойство в visible, до тех пор пока оно не будет перегружено его где-нибудь в другом месте, а вам потребуется поведение по умолчанию.

Здесь важно помнить, что даже если снаружи элемента есть видимый контент, этот контент не сместится на странице. Например:

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

Hidden

Противоположное значение — hidden. В этом случае элемент прячет любой контент, который выходит за его границы.

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

Однако, помните, что в этом случае контент скрыт и никаким способом он не станет доступным (кроме просмотра исходного текста страницы).

Таким образом, если у пользователя размер шрифта по умолчанию больше, чем вы ожидали, текст может оказаться за пределами элемента и оказаться спрятанным от его глаз.

Scroll

Если элементу установленно значение scroll, то он будет скрывать непоместившееся содержимое, но появятся скроллбары, чтобы была возможность просмотреть весь контент.

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

Auto

Значение auto похоже на значение scroll, за исключением того, что скроллбары показываются, только там где они действительно необходимы.

Отмена свойства float

Один из самых распространённых случаев использования свойства overflow, как это ни странно, отмена свойства float. Установка свойства overflow не отменяет свойство float у элемента.

Смысл такой, что элемент с установленным свойством overflow в значение auto или hidden, будет изменять размеры до тех пор, пока не вместит в себя все дочерние элементы, которым установлено свойство float, подразумевается что высота не установлена. Рассмотрим пример:

Обсуждение свойства float займёт отдельную статью, которой я возможно займусь в скором времени.

Кросс-браузерность

Как и у большинства свойств CSS, у свойства overflow есть свои особенности обработки в разных браузерах.

Скроллбары должны быть внутри или снаружи элемента?

Firefox располагает их снаружи, IE — внутри. Я считаю, что только IE располагает их правильно (они должны быть внутри).

Ошибка расширения элемента в IE 8

В новой версии IE появились новые ошибки, в том числе и такие серъёзные, из-за которых пропадает всё содержимое страницы. Подробности.

Плавающий макет

IE версий 6, 7 и 8 игнорируют значение по умолчанию visible для фиксированных размеров и расширяет элемент, чтобы подогнать контент. Это особенно важно для сайтов с плавающим макетом. В некоторых случаях одна колонка может вытеснить другую, и в итоге ломается вся разметка.

Ещё про IE

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

Пример.

Источник: http://www.css-tricks.ru/articles/css/the-css-overflow-property

Свойство CSS overflow

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

Это касается полос прокрутки по умолчанию. Можно контролировать поведение содержимого элемента, когда он выходит за пределы блока, с помощью CSS-свойства overflow hidden.

Значения свойства overflow

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не «заталкивать» содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

scroll: добавляет полосы прокрутки и скрывает содержимое, выходящее за пределы блока элемента. Его можно увидеть с помощью полос прокрутки.

auto: добавляет полосы прокрутки, если необходимо.

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

Теперь осмотрим, как каждое из этих значений влияет на контент.

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus. Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus.

CSS

#box { width: 200px; height: 100px; background-color: #FD2D0F; overflow: visible; }

Ширина и высота элемента div установлена на 200px и 100px. Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

Посмотреть демо

hidden

CSS overflow: hidden скрывает содержимое, выходящее за пределы контейнера.

Посмотреть демо

scroll

Добавляет полосы прокрутки, даже если содержимое не выходит за пределы контейнера. Обратите внимание, что overflow: scroll добавляет горизонтальную и вертикальную полосы прокрутки.

В приведенной ниже демо-версии полосы прокрутки добавлены для обоих блоков, даже когда размеры содержимого не превышают высоту и ширину второго блока.

Посмотреть демо

auto

Это значение похоже на значение scroll, но полосы прокрутки добавляются только при необходимости. В приведенной ниже демо-версии overflow: auto добавляет вертикальную полосу прокрутки к первому блоку, содержимое которого превышает его высоту блока. А во втором случае полосы прокрутки не добавляются.

Посмотреть демо

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

overflow-x и overflow-y

Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

HTML

Если ширина внешнего блока составляет 200 пикселей, а внутреннего — 250 пикселей, то задав для внешнего блока overflow-x: auto, мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Посмотреть демо

Если высота внешнего блока 100 пикселей, а высота внутреннего блока — 150 пикселей, то overflow-y: auto добавляет вертикальную полосу прокрутки.

Разбивка длинного текста

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

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisquegegetcondimentumsapien.Namin ligula molestie, laoreet neque cursus.

CSS

#box { width: 200px; height: 100px; background-color: #FD2D0F; }

Если мы укажем word-wrap: break-word, выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden.

Посмотреть демо

Поддержка браузерами

Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.

Перевод статьи «CSS overflow Property» дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/svoystvo-css-overflow.html

CSS Layout — Overflow

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

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Важно

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Читайте также:  Обзор криптобиржи exmo.me

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Свойство overflow указывает, следует ли вырезать содержимое или добавлять полосы прокрутки, если содержимое элемента слишком велико для размещения в указанной области.

Свойство overflow имеет следующие значения:

  • visible — По умолчанию. Переполнение не обрезается. Он вырисовывается вне поля элемента
  • hidden — Переполнение обрезается, а остальное содержимое будет невидимым
  • scroll — Переполнение обрезается, но для просмотра остальной части содержимого добавляется полоса прокрутки
  • auto — Если переполнение обрезано, необходимо добавить полосу прокрутки для просмотра оставшейся части содержимого

Примечание: Свойство overflow работает только для элементов блока с заданной высотой.

Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка»).

переполнение: видимый

По умолчанию переполнение является visible, что означает, что оно не обрезается и отображается вне поля элемента:

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

div {    width: 200px;    height: 50px;    background-color: #eee;    overflow: visible;

}

При значении hidden переполнение обрезается, а оставшаяся часть содержимого скрывается:

переполнение: прокрутка

Установка значения scroll , переполнение обрезается и полосы прокрутки добавляется, чтобы прокручивать внутри окна. Обратите внимание, что это добавит полосу прокрутки как горизонтально, так и вертикально (даже если она вам не нужна):

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

Значение auto аналогично scroll, только при необходимости добавляются полосы прокрутки:

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

Свойства overflow-x и overflow-y указывает, следует ли изменять overflow содержимого только по горизонтали или по вертикали (или оба):

overflow-x Указывает, что делать с левыми/правыми краями содержимого.
overflow-y Указывает, что делать с верхними/нижними краями содержимого.

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

div {    overflow-x: hidden; /* Hide horizontal scrollbar */    overflow-y: scroll; /* Add vertical scrollbar */

}

СвойствоDescription
overflow Указывает, что происходит, если содержимое переполнено полем элемента
overflow-x Указывает, что делать с левыми/правыми краями содержимого, если оно переполнено областью содержимого элемента
overflow-y Указывает, что делать с верхними/нижними краями содержимого, если оно переполнено областью содержимого элемента

Источник: https://html5css.ru/css/css_overflow.php

Свойство CSS overflow (hidden, visible, auto, scroll) и его разновидности | Создание сайтов и заработок в сети

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодня мы продолжаем тему каскадных таблиц стилей и в очередном уроке из «Учебника» рассмотрим, как с помощью правила CSS overflow (используя его значения hidden, visible, scroll и auto) можно управлять контентом, если он не умещается в пределах отведенной ему области.

На практике (при верстке либо при редактировании) такие ситуации встречаются нередко, поэтому это будет полезно многим.

Тем более, что попутно мы затронем вариации данного свойства overflow-x и overflow-y, которые являются частным случаем и обладают своими особенностями.

Совет

А также коснемся смежного правила text-overflow, определяющее режим видимости текста в блоке, который выходит за границы элемента.

Конечно, во многих случаях не обойтись без задания конкретных размеров области посредством width и height (ширины и высоты блока), которые могут принимать значения, выраженные в различных единицах измерения. В общем, рассмотрим ниже примеры действия свойства оверфлоу во всех возможных вариантах.

Сначала, следуя традиции, посмотрим, какие значения действуют в таблице спецификации Международного консорциума W3C (данные представлены по версии CSS2.1, хотя они действительны и поддерживаются в более новой версии CSS3):

Как видите, оверфлоу имеет 4 основных параметра (visible, hidden, auto, scroll) и значение inherit, которое можно прописать при желании присвоить дочерним элементам свойство родителя, однако по умолчанию это правило не наследуется (inherited: no на скриншоте). Дефолтным же значением является висибл (initial: visible).

Прежде, чем приступить к исследованию посредством практических примеров, давайте уясним для себя некоторые детали. Как уже было сказано выше, правило оверфлоу позволяет управлять содержимым блочного элемента в тех случаях, когда оно не помещается в его пределах. Это напрямую следует из названия данного CSS правила (overflow в переводе с английского означает переполнение, избыток.)

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

Возьмем для примера контейнер DIV (в этой статье подробнее о дивах как основе блочной верстки), подкрасим его с помощью background, подключив стили через атрибут style, и поместим внутрь произвольный текст:

TEXT…

Итоговый результат будет примерно таким:

У нас не определена ширина (width) контейнера. В этом случае, если вы помните, блочный элемент занимает все доступное ему место по ширине. А вот высота (height) блока, ежели она не указана, определяется именно содержанием (в нашем примере присутствующим там текстом).

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

Обратите внимание

А теперь попробуем к CSS стилям для дива из нашего примера добавить фиксированную ширину, скажем, 250px:

TEXT…

В результате произойдут следующие изменения с нашим контейнером:

В общем, все получилось в соответствии со сказанным выше: при указании фиксированной ширины блочного элемента содержание (текст) будет автоматически растягивать высоту контейнера. Далее укажем определенную высоту испытуемого блока, допустим, 40px:

TEXT…

В этом случае в условиях ограниченного пространства тому же самому объему контента деваться некуда и он вылезет за границу DIV по высоте:

Действует правило по умолчанию overflow visible (хотя оно и не прописано), в соответствии с которым содержимое, вылезающее за границы контейнера, отображается в браузере. Если теперь к стилям CSS элемента добавить overflow:hidden, то часть текста, не умещающегося в блоке, будет скрыто:

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

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

Как помните, при указании фиксированной ширины блока контент перераспределялся таким образом, что не превышал границы по горизонтали, но одновременно увеличивал высоту контейнера (вместе с содержимым) по вертикали. Теперь изменим содержание и стандартный текст заменим длинными словами без пробелов с указанием width:

Обратите внимание, что теперь содержимое при ограничении ширины сразу превысило границы по горизонтали. И если пропишем overflow hidden, то тем самым обрежем контент:

Теперь разберем тот случай, если ширина и высота контейнера фиксированные, но не умещающийся в нем контент желательно оставить доступным. Возьмем тот же пример c фиксированными шириной и высотой, только значение height для наглядности укажем в 60px, добавив overflow:scroll к CSS стилям:

TEXT…

В результате по вертикали и горизонтали появились полосы прокрутки (scrollbars):

Важно

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

Если же вы хотите, чтобы прокрутка появлялась только в случае необходимости, то имеет смысл применить параметр overflow:auto, который инициирует создание полос прокрутки только в том случае, если они действительно нужны (подробности посмотрите на этой вебстранице):

Хочу отметить, что у основного правила стилей есть вариации в виде overflow-x и overflow-y, которые принимают те же значения (visible, hidden, scroll, auto), что и базовый оверфлоу, только заданные параметры применяются к содержимому блоков по горизонтали (x) и по вертикали (y).

Правило CSS text-overflow (clip, ellipsis)

А теперь познакомимся с модификацией выше описанного свойства оверфлоу, которое появилось только в CSS3. О нем можно получить информацию на соответствующей официальной странице (редакторский черновик консорциума W3C):

Свойство text-overflow имеет 2 основных значения (clip и ellipsis). Оно действует только в том случае, если указан overflow, значение которого отлично от visible. А это, как вы помните, параметр по умолчанию, поэтому в стилях для соответствующего элемента должен обязательно присутствовать оверфлоу с hidden, scroll или auto.

Clip является дефолтным значением и просто обрезает текст. Поэтому задействуем text-overflow для нашего DIV с соответствующими CSS свойствами, добавив white-space:nowrap (для запрета переноса слов):

TEXT…

Получаем вот такой результат в итоге:

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

.class1:hover {overflow:visible; white-space:normal;}

Теперь текст будет обрезан, но ежели вы наведете на него курсор мышки, то он будет появляться в полном объеме. Можете в этом убедиться, перейдя по предоставленной ссылке.

Источник: https://goldbusinessnet.com/uchebnik-css/css-text-overflow-hidden-visible-auto-scroll-x-y/

Полосы прокрутки: CSS свойство overflow, тонкости

visible

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

Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития.

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

Совет
Обратите внимание

Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке новых предложений.

[/su_box]

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

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

Идейные соображения высшего порядка, а также рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач.

Читайте также:  Что такое кто такой копирайтер

hidden

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

Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития.

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

Совет
Обратите внимание

Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке новых предложений.

[/su_box]

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

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

Идейные соображения высшего порядка, а также рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач.

scroll

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

Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития.

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

Совет
Обратите внимание

Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке новых предложений.

[/su_box]

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

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

Идейные соображения высшего порядка, а также рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач.

auto

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

Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития.

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

Совет
Обратите внимание

Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке новых предложений.

[/su_box]

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

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

Идейные соображения высшего порядка, а также рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач.

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;}
h2 {color:#CC0033;}
div { width:200px; /* фиксированная ширина */ height:300px; /* фиксированная высота */ border:1px solid #555; padding:4px; margin:4px; float:left; }
.VisibleDiv {overflow:visible;}
.HiddenDiv {overflow:hidden;}
.ScrollDiv {overflow:scroll;}
.AutoDiv {overflow:auto;}

Важно

Стоит обратить внимание на то, что в данном конкретном случае блоки с заданой фиксированной высотой и шириной. Это важно, например, рассмотрим вариант, когда высота блока задана в auto:<\p>

Мы видимо, что текст во всех случаях корректно отображается внутри блока, кроме небольшого неудобства в случае со scroll, где появляются неактивные полосы прокрутки.

Но в этом случае заключается небольшая опасность, встретившись с которой многие не понимают, почему она возникла и как ее исправить. Дело в том, что если блок с overflow:visible; то есть значением по-умолчанию, а его содержимое имеет элементы с любым значением float, кроме none, то отображаться все это будет некорректно. Для того, чтобы понять, что это за ситуация, рассмотрим пример:

Под блоком VisibleDiv идет другой блок

visible

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

Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития.

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

Идет сразу после дива с overflow:visible (значением по-умолчанию)

Под блоком VisibleDiv ничего нету

visible

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

Таким образом укрепление и развитие структуры представляет собой интересный эксперимент проверки модели развития.

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

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;}
h2 {color:#CC0033;}
p {float:left;}
div { width:500px; height:auto; border:1px solid #555; padding:4px; margin:4px; }
.VisibleDiv {overflow:visible;background: rgba(0,255,0,0.1);}
.ignor {background: rgba(0,255,0,0.6); color:#FFFFFF; font-weight:bold;}

В первом случае, видно, что содержимое с свойством float выезжает за пределы блока и не учитываются им при определении высоты блока, во втором случае под блоком с overflow:visible; специально размещен другой блок и закращен в другой цвет.

Это не единственные примеры того, как может себя вести на странице такие блоки (с overflow:visible; и height:auto;).

Исправляется это заменой значения visible на hidden, следует помнить, что это свойство стоит указывать только блокам с height:auto;, если будет фиксированная высота, то велик шанс, что содержимое просто скроется, если оно больше заданной высоты.

Вот как будет выглядеть исправленный вариант:

Так же у вас не возникнет такой проблемы, если блоку с overflow:visible; и height:auto; задано еще и какое-нибудь значение свойства float. Вообще во многих случаях отображение элементов зависит от набора свойств, а не от отдельных свойств.

Источник: http://www.web.cofp.ru/vse-o-sajtakh/sozdanie-sajta/css/88-polosy-prokrutki-css-svojstvo-overflow-tonkosti

4.1. Переполнение. Свойство overflow | Азбука W€B

Свойство overflow:hidden

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

Рис. 4.1  Результат применения свойства overflow в значении visible.

Примечание:
Браузер MS Internet Explorer некорректно интерпретирует свойство overflow в значении visible. В случае переполнения он увеличивает размеры блока до значений, необходимых для полного вывода всей содержащейся в нем информации. Рассмотренный выше пример в браузере Internet Explorer будет выглядеть следующим образом (рис. 4.2):

Рис. 4.2  Интерпретация свойства overflow:visible браузером Internet Explorer.

Overflow: hidden

Это значение указывает на то, что вся информация (и дочерние блоки в том числе ), не уместившаяся в структурном блоке заданных размеров, будет усекаться и отображена не будет.

Пример использования (рис. 4.3)

Свойство overflow:hidden

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

Рис. 4.3  Результат применения свойства overflow в значении hidden.

Overflow: scroll

Использование ключевого слова scroll в качестве значения свойства overflow позволяет установить полосы прокрутки, чем достигается возможность доступа к информации без изменения размеров пространства, занимаемого структурным блоком на странице.

Пример использования (рис. 4.4)

Свойство overflow:scroll

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

Рис. 4.4  Результат применения свойства overflow в значении scroll.

Overflow: auto

Обработка возникшей ситуации переполнения определяется браузером. Им может быть использовано одно из вышеописанных значений в зависимости от контекста ситуации и своих индивидуальных настроек.

Обычно при значении auto в случаях переполнения браузер добавляет полосу прокрутки.

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

Пример использования (рис. 4.5)

Свойство overflow:auto

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

Рис. 4.5  Результат применения свойства overflow в значении auto.

Источник: http://azbukaweb.ru/uch-css1-4-1

Справочник по CSS

Атрибут overflow | Свойство overflow

Определяет как обрабатывать контент в объекте, если он не умещается в нем по ширине и высоте.

Синтаксис

HTML { overflow : sOverflow }
Скрипты [ sOverflow = ] object.style.overflow

Используемые значения

sOverflowСтрока, которая может определять и принимать одно из следующих значений:

visibleЗначение по умолчанию. Содержимое не обрезается и всегда отображается, полосы прокрутки не добавляются к объекту даже если контент превосходит установленные размеры.scrollКонтент обрезается. К объекту добавляются полосы прокрутки, причем даже тогда, когда содержимое поместилось в объект.hiddenКонтент, выходящий за границы объекта, не показывается.autoКонтент обрезается и полосы прокрутки появляются только когда это необходимо.-moz-hidden-unscrollable

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является visible, кроме объекта textarea; для него это hidden.

Читайте также:  Стратегия канал волатильности

Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Значением по умолчанию для элемента body является auto.

Если для свойства overflow объекта textarea задать значение hidden, то у объекта textarea автоматически не будут показываться полосы прокрутки.

Если свойству overflow задать значение visible, то текст будет обрезаться до размера окна или рамки объекта.

Совет

Это свойство доступно на платформе Macintosh также как в Microsoft Internet Explorer 5.

Начиная с Internet Explorer 6.0, когда вы используете объявление !DOCTYPE, свойство overflow применяется к объекту html.

Примеры

В первом примере используется атрибут overflow для автоматического выравнивания контента при загрузке страницы.

Во втором примере вы можете динамически задавать значение для свойства overflow объекта div.

Шустрая рыжая лисичка перепрыгнула ленивого пса.
visible scroll hidden auto

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)

Поддерживаемые браузеры

Internet Explorer 5.0, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.5, 9.6, 10.0

Safari 1.2, 2.0, 3.1

Firefox 1.5, 2.0, 3.0, 3.5

Смотри также

overflowX, overflowY, position.

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530824(VS.85).aspx

https://developer.mozilla.org/en/CSS/overflow

Источник: http://www.spravkaweb.ru/css/reference/attributes/positioning/overflow

Height, width и overflow — CSS правила для описания области контента при блочной верстке

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим о том, как можно задавать размеры для области контента с помощью height и width и как настроить отображение этого контента в случае, если его будет больше, нежели сможет поместиться в отведенное для него место (css правило overflow со значениями hidden, scroll, auto).

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

Height и width — размеры области с контентом в CSS

Для этого в языке стилевой разметки CSS предусмотрены правила описывающие ширину (width) и высоту (height) этой самой области. Ширина будет определяться размером контейнера, т.е. того пространства, в котором стоят Html элементы. Как только мы ее изменяем, то содержимое подстраивается под эту ширину. А вот ее высота зависит от его содержания.

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

Правила, которые регулируют данные размеры, называются width и height. Напомню, что они не обрезают изображение физически, поэтому предварительно нужно будет уменьшить размер фотографий (сжать их) и уже только потом загружать на сайт. У этих правил по умолчанию используется значение Auto (самостоятельный расчет — отдается на усмотрение браузера).

Т.о. абсолютно для всех тэгов, если значения width и height не заданы в явном виде, они будут рассчитываться браузером автоматически, начиная с самого внешнего элемента.

Ну, а кроме Auto значениями для них могут служить величины в размерах используемых в CSS или же проценты (про особенности использования процентов читайте чуть ниже):

Самым внешним элементом является тег Html, для которого допустимая ширина контента равна области просмотра (размеру видимой части экрана). Дальше браузер будет рассчитывать width для тэга body и так далее, вплоть до нужного нам элемента. В итоге получается, что ширина элемента будет подстраиваться под доступную ему (не занятую другими элементами) область и занимать ее целиком.

По этой самой причине все блочные элементы (читайте про них подробнее в статье про CSS правило display block), для которых не задано в явном виде значение width, будут стараться занять все доступное им место по ширине, а при изменении области просмотра (например, уменьшения окна браузера) горизонтальные размеры блочных элементов тоже будет изменяться соответствующим образом.

Кстати говоря, имеет смысл задавать height и width только для блочных тегов, ибо для строк их задание никакого смысла не имеет и браузером этот код отрабатываться не будет.

Но в то же время, если мы жестко зададим width для блочного элемента (например, абзаца заключенного в контейнер DIV), а широту внешнего контейнера не будем явно указывать (браузер тогда будет для него использовать умолчательное значение Auto), то при уменьшении области просмотра (окна обозревателя) может получиться так, что абзац вылезет за размеры контейнера Div, в котором он был заключен:

Обратите внимание

Это лишний раз подтверждает, что широта области контента является внешней величиной, никак не связанной с размером контейнера, в котором это самое содержимое заключено (запросто может вылезать за его пределы). А вот с высотой, которая задается через height, такой фокус уже не пройдет. Если мы увеличим высоту параграфа, то автоматически увеличится и высота контейнера Div, в котором он заключен.

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

Overflow — скрытие (hidden, visible) или прокрутка (scroll, auto)

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

Текст первого абзаца

Текст второго

Т.к. width и height для этих параграфов не заданы, то по умолчанию браузер сам рассчитывает их исходя из своего собственного понимания значения Auto. В результате абзацы занимают по ширине все доступное им место, а по высоте соответствуют высоте заключенного в них контента.

Давайте теперь внесем первое изменение и зададим жестко широту первого абзаца (width:50px):

Текст первого

Текст второго

В общем-то произошло ожидаемое — размер по горизонтали уменьшился до заданной в width:50px величины, ну, а высота параграфа по-прежнему формируется благодаря height:auto (умолчательному значению). В результате она стала такой, чтобы вместить в себя весь текст.

Но давайте теперь ограничим и высоту контейнера с помощью height:15px.

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

Overflow означает «сверхпоток» или, другими словами, «переполнение контента». Оно говорит о том, что должно произойти с содержимым, если он не уместился в пределы той области (контейнера), которая ему была отведена.

У Overflow имеется несколько допустимых значений, но по умолчанию используется visible (показывать):

Важно

Именно поэтому в нашем последнем примере текст верхнего абзаца наехал на нижний (по умолчанию использовалось overflow:visible — показывать содержимое не уместившийся в контейнер). Мы могли бы использовать другую крайность — overflow:hidden. Тогда бы все, что не поместилось внутри контейнера, не показывалось бы на вебстранице:

Другие два значения этого CSS свойства позволяют скролить не уместившееся в контейнер содержимое (что-то похожее мы уже наблюдали, когда изучали атрибуты Html тега Frame). Итак, scroll отобразит полосы прокрутки по вертикали и горизонтали даже в том случае, если содержание благополучно умещается в отведенном для него контейнере:

Но гораздо более логичным будет использование значения Auto для Overflow, если вам необходимо сделать полосы прокрутки. В этом случае браузер сам будет рассчитывать, когда нужно их отображать и по каким именно осям.

Например, в случае использования overflow:auto мы получим возможность прокрутки только по той оси, где содержимое не умещается в границах контейнера:

Текст первого

Текст второго

Резюмируя можно сказать, что Overflow позволяет довольно гибко настроить варианты показа контента в том случае, когда он вылазит за пределы своего контейнера. У вас будет возможность выехавший контент показывать (visible), не показывать (обрезать — hidden), либо делать обязательную прокрутку (scroll) или же прокрутку по необходимости (auto).

Есть еще варианты написания этого правила относящиеся к CSS3, но которые поддерживаются всеми браузерами, а значит их можно будет смело использовать. Я говорю про варианты overflow-x и overflow-y, которые позволяют задавать или не задавать прокрутку по отдельным осям (x — горизонтальная, y — вертикальная).

Если вам, например, нужно сделать так, чтобы по горизонтали прокрутка не появлялась никогда, а по вертикали появлялась бы только по необходимости (если контент не умещается), то для Html элемента нужно будет прописать overflow-x:hidden и overflow-y:auto. Все, задача будет решена, ибо данный финт ушами поддерживается всеми браузерами.

Height и width в процентах — зачем нужен doctype

Теперь давайте поговорим о том, от чего считается ширина заданная в процентах. Помните, в начале статьи я обещал на этом еще заострить наше внимание. Ну, собственно, CSS правило width здесь не является исключением и точно так же, как и padding и margin, считается в процентах от горизонтального размера контейнера с контентом.

Несколько запутаннее обстоит дело с высотой области контента заданной в процентах. Было бы логично предположить, что аналогично — от высоты контейнера.

Но тут мы с вами начинаем сталкиваться с дуализмом (двумя моделями поведения) — как делали раньше и как делают сейчас по принятым стандартам.

Совет

В связи с этим следует еще раз затронуть тему режимов отображения и рассмотренную нами ранее декларацию doctype.

Исторически так сложилось, что после принятия стандартов оставалось все равно большое количество документов, сформированных по старым правилам чистого языка Html и с ними нужно было что-то делать.

В то же время стандарт языка Html тоже развивался (выделился язык стилевой разметки и устарели некоторые теги и атрибуты), поэтому понадобилось каким-то образом показать браузеру, по каким именно стандартам нужно будет ему разбирать данный код.

Для того, чтобы отделить документы новые (которые учитывали все появившиеся стандарты) и старые (не учитывающие зачастую ничего, кроме чистого Html), компанией Мелкософт было предложено использовать небольшую фишечку из только что появившегося тогда языка XML. Фишечка эта была служебной и называется сейчас декларация doctype.

Выглядеть она может по-разному (читайте об этом подробнее в упомянутой чуть выше статье), но завсегда будет работать такой вариант:

Таким образом браузер получил маркер того, по каким стандартам ему разбирать документ. Если декларация doctype проставлена, тогда он переходит в режим соответствия стандартам (standarts mode).

Если же в коде документа на его первой строчке doctype обозреватель не обнаружит (или она будет написана не правильно, что идентично ее отсутствию), то тогда он переходит в так называемый режим уловок (quirks mode).

Документ, в котором отсутствует doctype, в браузере будет отображаться таким образом, как будто бы он очень старый (старинный). Если в этот же документ добавить декларацию, то обозреватель уже сбросит свой налет старины и начнет работать с кодом документа по всем принятым сейчас стандартам.

Источник: https://KtoNaNovenkogo.ru/html/uroki-css/height-width-overflow-css-pravila-dly-oblasti-kontenta-blochnoj-verstke.html

Ссылка на основную публикацию