1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: overflow-y
slug: Web/CSS/overflow-y
tags:
- CSS
- CSS Modelo de Caja
- Propiedad CSS
translation_of: Web/CSS/overflow-y
---
<div>{{CSSRef}}</div>
<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>overflow-y</code> define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.</p>
<div class="blockIndicator note">
<p>Si {{cssxref("overflow-x")}} es <code>hidden</code>, <code>scroll</code> o <code>auto</code> y esta propiedad es <code>visible</code> (por defecto) se calculará implícitamente como <code>auto</code>.</p>
</div>
<p>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</p>
<div class="hidden">
<p>El código para este ejemplo interactivo está almacenado en un repositorio de GitHub. Si quieres contribuir con el proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</p>
</div>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush: css"><code>/* Valores con una palabra clave */
overflow-y: visible;
overflow-y: hidden;
overflow-y: scroll;
overflow-y: auto;</code>
/* Valores globales */
overflow-y: inherit;
overflow-y: initial;
overflow-y: unset;</pre>
<p>La propiedad <code>overflow-y</code> es especificada con una sola palabra clave escogida de la lista de abajo.</p>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>visible</code></dt>
<dd>El contenido no es recortado y puede ser visualizado fuera de los extremos superior e inferior del área de padding.</dd>
<dt><code>hidden</code></dt>
<dd>El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. No se dispone de las barras de desplazamiento.</dd>
<dt><code>scroll</code></dt>
<dd>El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. Los navegadores muestran las barras de desplazamiento independientemente de si el contenido se recorta o no (esto evita que las barras de desplazamiento aparezcan o desaparezcan cuando el contenido cambia). Las impresoras pueden imprimir el contenido desbordado.</dd>
<dt><code>auto</code></dt>
<dd>Depende del cliente. Si el contenido se recorta dentro del área de padding, se vería igual que con la propiedad <code>visible</code>, pero aún determinado por un contexto de formato de bloque. Los navegadores de escritorio proveen barras de desplazamiento si el contenido se desborda.</dd>
</dl>
<h3 id="Sintaxis_Formal">Sintaxis Formal</h3>
<pre>{{csssyntax}}</pre>
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><ul>
<li><code>overflow-y:hidden</code> — Esconde el texto fuera de la caja
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li><code>overflow-y:scroll</code> — Agrega una barra scroll si se necesita
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li><code>overflow-y:visible</code> — Muestra el texto fuera de la caja si se necesita
<div id="div3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li><code>overflow-y:auto</code> — En la mayoría de los navegadores, equivalente a <code>scroll</code>
<div id="div4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#div1,
#div2,
#div3,
#div4 {
border: 1px solid black;
width: 250px;
height: 100px;
}
#div1 { overflow-y: hidden; margin-bottom: 12px;}
#div2 { overflow-y: scroll; margin-bottom: 12px;}
#div3 { overflow-y: visible; margin-bottom: 120px;}
#div4 { overflow-y: auto; margin-bottom: 120px;}
</pre>
<h3 id="Resultado">Resultado</h3>
<figure>
<p>{{EmbedLiveSample("Ejemplo", "100%", "780")}}</p>
</figure>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div>{{Compat("css.properties.overflow-y")}}</div>
<h2 id="See_also" name="See_also">Ver también</h2>
<ul>
<li>Propiedades CSS relacionadads: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
</ul>
|
