overflow-y

概述

当一个块级元素的内容在垂直方向发生溢出时,CSS属性overflow-y决定应该截断溢出内容,或者显示滚动条,或者直接显示溢出内容。

  • 初始值 visible
  • 适用元素 non-replaced block-level elements and non-replaced inline-block elements
  • 可继承 no
  • 适用媒体 visual
  • 计算值 as specified
  • 可动画
  • Canonical order the unique non-ambiguous order defined by the formal grammar

用法

合法值: visible | hidden | scroll | auto
overflow-y: visible
overflow-y: hidden
overflow-y: scroll
overflow-y: auto

overflow-y: inherit

解释

visible
内容不会被截断,且可以显示在内容盒之外。
hidden
内容会被截断,且不会显示滚动条。
scroll
桌面浏览器总是显示滚动条,无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
auto
取决于浏览器本身。当内容发生溢出时,桌面浏览器如Firefox会显示滚动条。

示例

HTML

<div id="div1">
  <h1><code>overflow-y:visible;</code></h1>
  <p>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.</p>
</div>

<div id="div2">
  <h1><code>overflow-y:auto;</code></h1>
  <p>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.</p>
</div>

<div id="div3">
  <h1><code>overflow-y:hidden;</code></h1>
  <p>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.</p>
</div>

CSS

#div1,
#div2,
#div3 {
  border: 10px dotted blue;
  width:  200px;
  height: 100px;
}

#div1 { overflow: visible; }
#div2 { overflow: auto; }
#div3 { overflow: hidden; }

结果

规范

规范 状态 备注
CSS Basic Box Model Working Draft  

浏览器支持

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 1.0 Unknown (1.5) 5.0 [*] 9.5 3.0
特性 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 1.0 (Yes) 1.0 (1.5) (Yes) (Yes) (Yes)

[*] IE8 引入了属性-ms-overflow-y,作用与overflow-y相同。不要使用前缀-ms-

参见

Document Tags and Contributors

Contributors to this page: Jimmie_Felidae
最后编辑者: Jimmie_Felidae,