溢出-y | overflow-y
overflow-y
当一个块级元素的内容在垂直方向发生溢出时，CSS属性overflow-y决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。
/* Content is not clipped */
overflow-y: visible;
/* Content is clipped, with no scrollbars */
overflow-y: hidden;
/* Content is clipped, with scrollbars */
overflow-y: scroll;
/* Let the browser decide */
overflow-y: auto;
/* Global values */
overflow-y: inherit;
overflow-y: initial;
overflow-y: unset;
| 初始值 | visible |
|---|---|
| 适用元素 | non-replaced block-level elements and non-replaced inline-block elements |
| 是否是继承属性 | no |
| 适用媒体 | visual |
| 计算值 | as specified |
| Animation type | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
值
visible内容不会被截断，且可以显示在内容盒之外。hidden内容会被截断，且不会显示滚动条。scroll桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。auto取决于浏览器本身。当内容发生溢出时，桌面浏览器如Firefox会显示滚动条。
正式语法
visible | hidden | scroll | auto
示例
HTML
<ul>
<li><code>overflow-y:hidden</code> — hides the text outside the box
<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> — always add a scrollbar
<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> — displays the text outside the box if needed
<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> — on most browser, equivalent to <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>
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;}
结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Overflow Module Level 3The definition of 'overflow-y' in that specification. | Working Draft | |
| CSS Basic Box ModelThe definition of 'overflow-y' in that specification. | Working Draft | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.5 (1.8) | 5.0 * | 9.5 | 3.0 |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | (Yes) | 1.0 (1.5) | (Yes) | (Yes) | (Yes) |
