overflow-y

概述

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

用法

合法值: 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; }

结果

规范

浏览器支持

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

参见

• 相关CSS属性: text-overflow, white-space, overflow, overflow-y, clip, display