Faire son site 11 : Référence CSS - overflow-y

overflow-y

La propriété overflow-y définit la façon dont est géré l'affichage du contenu lorsque celui-ci déborde de son bloc verticalement.

Pour que cette propriété fonctionne, il faut que la hauteur du bloc soit limitée par une propriété height ou max-height.

Les valeurs que peut prendre la propriété overflow-y sont:

<style>
.bloc {
  width: 400px;
  height: 80px;
  border: 1px dotted black;
}
</style>

overflow-y: visible; (C'est la valeur par défaut)
Il était une fois
Une marchande de foie
Qui vendait du foie
Dans la ville de Foix.
Elle se dit ma foi
C'est la première fois
Et la dernière fois
Que je vends du foie
Dans la ville de Foix.


Si vous avez un autre bloc sous ce bloc, il sera en partie recouvert ce qui risque de donner un mauvais résultat.


overflow-y: hidden;
Il était une fois
Une marchande de foie
Qui vendait du foie
Dans la ville de Foix.
Elle se dit ma foi
C'est la première fois
Et la dernière fois
Que je vends du foie
Dans la ville de Foix.

overflow-y: scroll;
Il était une fois
Une marchande de foie
Qui vendait du foie
Dans la ville de Foix.
Elle se dit ma foi
C'est la première fois
Et la dernière fois
Que je vends du foie
Dans la ville de Foix.