overflow

  • Raccourci de la révision : CSS/overflow
  • Titre de la révision : overflow
  • ID de la révision : 462993
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Oui
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS overflow définie comment le contenu est rogné, les barres de défilement affichées ou afficher le contenu en débord dans un élément bloc.

{{cssbox("overflow")}}

Syntaxe

overflow:  visible | hidden | scroll | auto | {{ cssxref("inherit") }}

Valeurs

visible
Valeur par défaut. Le contenu n'est pas rogné, il peut être affiché en dehors de la boîte de contenu.
hidden
Le contenu rogné et aucune barre de défilement n'est affichée.
scroll
Le contenu est rogné et les navigateurs de bureau utilisent des barres de défilement, que du contenu soit rogné ou non. Ceci évite tout problème de barre de défilement qui apparaissent puis disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu hors cadre.
auto
Dépend de l'user-agent. Les navigateurs de bureau comme Firefox affichent des barres de défilement si le contenu dépasse.

Extensions Mozilla

-moz-scrollbars-none
{{ obsolete_inline() }} Utilisez overflow:hidden à la place.
-moz-scrollbars-horizontal
{{ Deprecated_inline() }} L'utilisation de {{ Cssxref("overflow-x") }} et {{ Cssxref("overflow-y") }} est préférée.
-moz-scrollbars-vertical
{{ Deprecated_inline() }} L'utilisation de {{ Cssxref("overflow-x") }} et {{ Cssxref("overflow-y") }} est préférée.
-moz-hidden-unscrollable
Prévu pour l'usage interne et par les thèmes. Désactive le défilement à l'aide des flèches et de la roulette de la souris pour les éléments XML racines et de <html>, <body>.

Exemples

p {  
     width: 12em;
     border: dotted;
     overflow: auto;   /* ajoute des barres de défilement si nécessaire */ 
}

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
short text

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Notes

Jusqu'à Gecko 1.9.2 (Firefox 3.6), la propriété overflow n'était pas appliquée correctement aux éléments de tableaux (<thead> , <tbody> , <tfoot>). Ce comportement a été corrigé dans les versions plus récentes.

Spécifications

Compatibilité des navigateurs

Navigateur Version la plus basse
Internet Explorer 4.0 [*]
Firefox (Gecko) 1.0 (1.0)
Opera 4.0-7.0
Safari (WebKit) 1.0 (85)

[*] IE 4-6 agrandi un élément à l'usage de overflow:visible (valeur par défaut) pour placer le contenu. height/width se comporte alors comme min-height/min-width.

Voir également

  • Propriété CSS liées : {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>overflow</code> définie comment le contenu est rogné, les barres de défilement affichées ou afficher le contenu en débord dans un élément bloc.</p>
<p>{{cssbox("overflow")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval">
overflow:  visible | hidden | scroll | auto | {{ cssxref("inherit") }}</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    visible</dt>
  <dd>
    Valeur par défaut. Le contenu n'est pas rogné, il peut être affiché en dehors de la boîte de contenu.</dd>
  <dt>
    hidden</dt>
  <dd>
    Le contenu rogné et aucune barre de défilement n'est affichée.</dd>
  <dt>
    scroll</dt>
  <dd>
    Le contenu est rogné et les navigateurs de bureau utilisent des barres de défilement, que du contenu soit rogné ou non. Ceci évite tout problème de barre de défilement qui apparaissent puis disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu hors cadre.</dd>
  <dt>
    auto</dt>
  <dd>
    Dépend de l'user-agent. Les navigateurs de bureau comme Firefox affichent des barres de défilement si le contenu dépasse.</dd>
</dl>
<h4 id="Extensions_Mozilla">Extensions Mozilla</h4>
<dl>
  <dt>
    -moz-scrollbars-none</dt>
  <dd>
    {{ obsolete_inline() }} Utilisez <code>overflow:hidden</code> à la place.</dd>
  <dt>
    -moz-scrollbars-horizontal</dt>
  <dd>
    {{ Deprecated_inline() }} L'utilisation de {{ Cssxref("overflow-x") }} et {{ Cssxref("overflow-y") }} est préférée.</dd>
  <dt>
    -moz-scrollbars-vertical</dt>
  <dd>
    {{ Deprecated_inline() }} L'utilisation de {{ Cssxref("overflow-x") }} et {{ Cssxref("overflow-y") }} est préférée.</dd>
  <dt>
    -moz-hidden-unscrollable</dt>
  <dd>
    Prévu pour l'usage interne et par les thèmes. Désactive le défilement à l'aide des flèches et de la roulette de la souris pour les éléments XML racines et de <code> &lt;html&gt;</code>, <code>&lt;body&gt;</code>.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre>
p {  
     width: 12em;
     border: dotted;
     overflow: auto;   /* ajoute des barres de défilement si nécessaire */ 
}
</pre>
<p style="overflow:hidden;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: hidden</code><br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p style="overflow:scroll;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: scroll</code><br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p style="overflow:auto;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: auto</code><br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p style="overflow:auto;display:inline-block;width:12em;height:6em;border:dotted"><code>overflow: auto</code><br />
  short text</p>
<p style="overflow:visible;display:inline-block;width:12em;height:6em;border:dotted"><code>visible</code> (default)<br />
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<h2 id="Notes">Notes</h2>
<p>Jusqu'à Gecko 1.9.2 (Firefox 3.6), la propriété <code>overflow</code> n'était pas appliquée correctement aux éléments de tableaux (<code>&lt;thead&gt;</code> , <code>&lt;tbody&gt;</code> , <code>&lt;tfoot&gt;</code>). Ce comportement a été corrigé dans les versions plus récentes.</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#overflow">CSS 2.1 Visual effects #overflow</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Navigateur</th>
      <th>Version la plus basse</th>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td><strong>4.0</strong> [*]</td>
    </tr>
    <tr>
      <td>Firefox (Gecko)</td>
      <td><strong>1.0</strong> (1.0)</td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>4.0-<strong>7.0</strong></td>
    </tr>
    <tr>
      <td>Safari (WebKit)</td>
      <td><strong>1.0</strong> (85)</td>
    </tr>
  </tbody>
</table>
<p>[*] IE 4-6 agrandi un élément à l'usage de <code>overflow:visible</code> (valeur par défaut) pour placer le contenu. <code>height/width</code> se comporte alors comme <code>min-height/min-width</code>.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>Propriété CSS liées : {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}</li>
</ul>
Revenir à cette révision