• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • overflow-y

    当一个块级元素(div元素、p元素之类的)的内容在垂直方向发生溢出时,CSS属性overflow-y 决定如何处理溢出的内容。隐藏溢出内容(hidden),或者显示滚动条(scroll),或者直接显示溢出内容(visible),或者让浏览器来处理(auto)。

    示例

    /* 在当前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; /*未设置*/
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持overflow-y

    语法

    overflow-y:visible| hidden| scroll| auto

    取值

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

    实例

    //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>
    
    //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;  }
    
    

    上篇:overflow-x

    下篇:<position>