--- 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> {{csssyntax("overflow-y")}} </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> {{Compat("css.properties.overflow-y")}} <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>