Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad overflow-y
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada desbordamiento-y Con sintaxis y ejemplos.
describir
La propiedad CSS overflow-y define qué hacer cuando el contenido desborda verticalmente el cuadro de contenido (es decir, arriba y abajo), como mostrar el contenido fuera del cuadro de contenido, recortar el contenido o mostrar una barra de desplazamiento vertical.
sintaxis
La sintaxis de la propiedad CSS overflow-y es:
overflow-y: value;parámetro o parámetro
valor
El comportamiento aplicado cuando el contenido desborda verticalmente el cuadro de contenido. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| visible | El contenido no se recorta, sino que se muestra fuera del cuadro de contenido (este es el comportamiento predeterminado) div { desbordamiento-y: visible; } |
| oculto | El contenido está recortado, el contenido de desbordamiento está oculto, la barra de desplazamiento vertical no se muestra div { desbordamiento-y: oculto; } |
| Desplazarse | El contenido se recorta y se muestra una barra de desplazamiento vertical div { desbordamiento-y:desplazamiento; } |
| carro | El navegador decide cómo manejar el contenido desbordado, que puede variar de un navegador a otro (pero generalmente se mostrará una barra de desplazamiento vertical según sea necesario) div { desbordamiento-y: auto; } |
| heredar | El elemento heredará el desbordamiento de su elemento principal div { desbordamiento-y: heredar; } |
notas
- La propiedad overflow-y se aplica a bloques, bloques en línea y celdas de tabla.
- La propiedad overflow-y no maneja el desbordamiento horizontal. Para controlar el desbordamiento horizontal, consulte las propiedades overflow y overflow-x.
Compatibilidad del navegador
La propiedad CSS overflow-y tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- Ópera 9.5+
- Safari (WebKit)
ejemplo
Discutiremos la propiedad overflow-y a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
visible
Veamos un ejemplo con overflow-y configurado como visible.
CSS se ve así:
div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow-y: visible; }HTML se ve así:
<div>
<p>This is the first paragraph written by prograrmaplus.com.</p>
<p>This is the second paragraph written by prograrmaplus.com.</p>
</div>El resultado se verá así:
En este ejemplo de overflow-y de CSS, configuramos overflow-y como visible, lo que significa que cuando el contenido desborda el cuadro de contenido verticalmente (es decir, de arriba a abajo), no se recortará, pero se mostrará en el cuadro de contenido. fuera de.
oculto
Ahora, establezcamos overflow-y en oculto con el mismo ejemplo.
CSS se ve así:
div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow-y: hidden; }HTML se ve así:
<div>
<p>This is the first paragraph written by prograrmaplus.com.</p>
<p>This is the second paragraph written by prograrmaplus.com.</p>
</div>El resultado se verá así:
En este ejemplo de overflow-y de CSS, configuramos la propiedad overflow-y como oculta, de modo que cuando el contenido desborda el cuadro de contenido verticalmente (es decir, de arriba a abajo), se oculta y no se muestra la barra de desplazamiento.
Desplazarse
Finalmente, tomemos un ejemplo y configuremos overflow-y para desplazarse y ver qué sucede.
CSS se ve así:
div { background: lightyellow; border: 3px solid red; padding: 5px; height: 100px; width: 150px; overflow-y: scroll; }HTML se ve así:
<div>
<p>This is the first paragraph written by prograrmaplus.com.</p>
<p>This is the second paragraph written by prograrmaplus.com.</p>
</div>El resultado se verá así:
En este ejemplo de overflow-y de CSS, configuramos la propiedad overflow-y para desplazarse, de modo que cuando el contenido desborda el cuadro de contenido verticalmente (es decir, de arriba a abajo), se recorta y se muestra una barra de desplazamiento vertical.