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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
|
---
title: overflow-y
slug: Web/CSS/overflow-y
tags:
- 元素单一方向溢出
translation_of: Web/CSS/overflow-y
---
<div>{{CSSRef}}</div>
<h2 id="Summary" name="Summary">概述</h2>
<p>当一个块级元素（div元素、p元素之类的）的内容在垂直方向发生溢出时，</p>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a>属性<code>overflow-y </code>决定如何处理溢出的内容。</p>
<p>隐藏溢出内容（hidden），或者显示滚动条（scroll），或者直接显示溢出内容（visible），或者让浏览器来处理（auto）。</p>
<div>{{cssinfo}}</div>
<h2 id="Syntax" name="Syntax">Syntax[语法]</h2>
<pre>/* 在当前css选择器元素下, 元素内容在垂直方向上溢出时 */
/* overflow-y 属性 可选值 */
overflow-y: visible; /*内容可见*/
overflow-y: hidden; /*内容隐藏*/
overflow-y: scroll; /*总是显示滚动条*/
overflow-y: auto; /*浏览器决定*/
/* overflow-y 属性 全局可选值 */
overflow-y: inherit; /*继承*/
overflow-y: initial; /*默认值*/
overflow-y: unset; /*未设置*/
</pre>
<h3 id="Values" name="Values">Values[可选值]</h3>
<dl>
<dt><code>visible</code></dt>
<dd>内容不会被截断，且可以显示在内容盒之外。</dd>
<dt><code>hidden</code></dt>
<dd>内容会被截断，且不会显示滚动条。</dd>
</dl>
<dl>
<dt><code>clip</code> {{experimental_inline}}</dt>
<dd>像 <code>hidden</code> 一样，内容被剪切到元素的填充框中。 <code>clip</code> 和 <code>hidden</code> 的区别是 <code>clip</code> 还禁止所有滚动，包括程序性滚动（programmatic scrolling）。包含框不再是滚动容器，并且不会启动新的格式设置上下文。 如果要启动新的格式设置上下文，可以使用 {{cssxref("display", "display: flow-root", "#flow-root")}} 。</dd>
</dl>
<dl>
<dt><code>scroll</code></dt>
<dd>桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。</dd>
<dt><code>auto</code></dt>
<dd>取决于浏览器本身。当内容发生溢出时，桌面浏览器如Firefox会显示滚动条。</dd>
<dt>
<h3 id="Formal_syntax正式语法">Formal syntax[正式语法]</h3>
<pre>{{csssyntax("overflow-y")}}
</pre>
</dt>
</dl>
<h2 id="Example" name="Example">Example[示例]</h2>
<h3 id="Exampe_HTML" name="Exampe_HTML">HTML</h3>
<pre class="brush: html"><ul>
<li><code>overflow-y:scroll</code> — 总是显示滚动条
<div id="div1">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>
<li><code>overflow-y:hidden</code> — 在盒子外隐藏溢出的内容
<div id="div2">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>
<li><code>overflow-y:visible</code> — 在盒子外显示溢出的内容
<div id="div3">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>
<li><code>overflow-y:auto</code> — 在大多数浏览器中, <code>auto</code> 效果等于 <code>scroll</code>
<div id="div4">
歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
</div>
</li>
</ul>
</pre>
<h3 id="Example_CSS" name="Example_CSS">CSS</h3>
<pre class="brush: css">#div1,
#div2,
#div3,
#div4 {
border: 1px solid black; /*元素边框 1px宽 黑边*/
width: 280px;
height: 120px;
}
#div1 { overflow-y: scroll; margin-bottom: 12px; }
#div2 { overflow-y: hidden; margin-bottom: 12px; }
#div3 { overflow-y: visible; margin-bottom: 150px; }
#div4 { overflow-y: auto; margin-bottom: 12px; }
</pre>
<h3 id="Example_Result" name="Example_Result">结果</h3>
<figure>{{EmbedLiveSample("Example", "100%", "760")}}</figure>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器支持</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>基本支持</td>
<td>1.0</td>
<td>{{CompatGeckoDesktop("1.5")}}</td>
<td>5.0 [*]</td>
<td>9.5</td>
<td>3.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基本支持</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.5")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[*] IE8 引入了属性<code>-ms-overflow-y</code>，作用与<code>overflow-y</code>相同。不要使用前缀<code>-ms-</code>。</p>
<h2 id="See_also" name="See_also">参见</h2>
<ul>
<li>相关CSS属性: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
</ul>
|
