Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
您的搜索结果

    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-

    参见

    文档标签和贡献者

    此页面的贡献者有: teoli, Jimmie_Felidae
    最后编辑者: teoli,