Оглавление

12.3. Атрибут overflow

Атрибут overflow задает поведение блока, чье содержимое вылезает за его границы. Может принимать следующие значения:
□   visible — блок расширяется так, чтобы все его содержимое отобразилось полностью (значение по умолчанию). Если размеры заданы явным образом, то содержимое будет выходить за границы блока, а размеры самого блока останутся прежними;
□   hidden — то, что не влезает в границы блока, скрывается;
□   scroll — у блока в любом случае отображаются полосы прокрутки:
□   auto — если содержимое не помещается в блок, то добавляются полосы прокрутки. Если же содержимое полностью помещается, то полосы не отображаются.


Различные варианты использования атрибута overflow приведены в листинге 9.

 

Листинг 9. Атрибут overflow


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Атрибут overflow</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body { font-size: 14px; font-family: Arial; color: black}
.div1 div { width: 200px; height: 100px }
.div1 div, .div2 div { 
  background-color: silvers; 
  border: red 2px solid; 
  margin-bottom: lOpx
}
.div2 { height: 600рх } 
span { font-weight: bold } 
</style>
</head> 
<body> 
<div class="div1">
<span>overflow = hidden</span><br>
<div style="overflow: hidden">
этоочекьдлиннаястрокабезлробелов
To, что не влезает в границы блока, скрывается
</div>
<span>overflow = scroll</span><br>
<div style="overflow: scroll">
этоочекъдлиннаястрокабезлробелов
overflow = scroll. У блока в любом случае отображаются полосы прокрутки
</div>  
<span>overflow = auto</span><br>
<div style="overflow: auto">
этооченьдлиннаястрокабезпробелов
overflow = auto. Если содержимое не помещается в блок, то добавляются
полосы прокрутки
</div> 
</div> 
<div class="div2">
<span>overflow = visible. Высота не задана</span><br>
<div style="overflow: visible; width: 100px;">
этооченьдлиннаястрокабезпробелов
overflow = visible. Блок расширяется так, чтобы все его содержимое
отобразилось полностью
</div>
<span>overflow = visible. Высота задана</span><br>
<div style="overflow: visible; width: 100px; height: 100px;">
этооченьдлиннаястрокабезпробелов
overflow = visible. Если размеры заданы, то содержимое будет выходить
за границы блока
</div> 
</div> 
</body> 
</html>



overflow = hidden
этоочекьдлиннаястрокабезлробелов To, что не влезает в границы блока, скрывается
overflow = scroll
этоочекъдлиннаястрокабезлробелов overflow = scroll. У блока в любом случае отображаются полосы прокрутки
overflow = auto
этооченьдлиннаястрокабезпробелов overflow = auto. Если содержимое не помещается в блок, то добавляются полосы прокрутки
overflow = visible. Высота не задана
этооченьдлиннаястрокабезпробелов overflow = visible. Блок расширяется так, чтобы все его содержимое отобразилось полностью
overflow = visible. Высота задана
этооченьдлиннаястрокабезпробелов overflow = visible. Если размеры заданы, то содержимое будет выходить за границы блока



<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити