Maison > Article > interface Web > Comment utiliser l'attribut CSS overflow-y

Comment utiliser l'attribut CSS overflow-y

青灯夜游original: 2019-05-29 14:30:542810parcourir

L'attribut CSS overflow-y est utilisé pour spécifier si les bords supérieur/inférieur du contenu sont rognés lorsque l'élément déborde de la zone de contenu. L'attribut overflow-y ne fonctionne pas correctement dans IE8 et les navigateurs antérieurs.

Comment utiliser l'attribut CSS overflow-y ?

L'attribut overflow-y spécifie s'il faut recadrer le bord supérieur/inférieur du contenu s'il déborde de la zone de contenu de l'élément.

Syntaxe :

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

Valeur de l'attribut :

● Visible : Le contenu n'est pas recadré et peut être affiché dans le zone de contenu à l'extérieur.

Quantity caché : contenu recadré - aucun mécanisme de défilement n'est fourni.

QuantityScroll : Recadrer le contenu - Fournit un mécanisme de défilement.

Quantityauto : Si la boîte déborde, un mécanisme de défilement doit être prévu.

● pas d'affichage : si le contenu ne rentre pas dans la zone de contenu, supprimez la zone entière.

● no-content : masquez l'intégralité du contenu s'il ne rentre pas dans la zone de contenu.

Remarque : Vous pouvez utiliser l'attribut overflow-x pour déterminer s'il faut recadrer les bords gauche/droit. L'attribut overflow-y ne fonctionne pas correctement dans IE8 et les navigateurs antérieurs.

Exemple d'attribut CSS overflow-y

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body>
<div><p style="width:140px">
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p></div>
<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>
</body>
</html>

Rendu :

Comment utiliser lattribut CSS overflow-y

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser l'attribut CSS box-linesArticle suivant：Comment utiliser l'attribut CSS box-lines

Articles Liés

Voir plus