CSS overflow-y 属性-之路教程

语法

overflow-y: visible | hidden | scroll | auto | initial | inherit;

overflow-y 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.scroll {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y 属性示例</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">经历过风雨，才懂得阳光的温暖。 </div>
  </body>
</html>

具有“可见”值的overflow-y 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.visible {
        background-color: #8ebf42;
        color: #666;
        height: 40px;
        width: 200px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y 属性示例</h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">经历过风雨，才懂得阳光的温暖。经历过风雨，才懂得阳光的温暖。</div>
  </body>
</html>

带有“隐藏”值的overflow-y 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.hidden {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y 属性示例</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">经历过风雨，才懂得阳光的温暖。经历过风雨，才懂得阳光的温暖。经历过风雨，才懂得阳光的温暖。</div>
  </body>
</html>

带有 "auto" 值的 overflow-y 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.auto {
        background-color: #1c87c9;
        color: #fff;
        height: 60px;
        width: 200px;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y 属性示例</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">经历过风雨，才懂得阳光的温暖。经历过风雨，才懂得阳光的温暖。经历过风雨，才懂得阳光的温暖。</div>
  </body>
</html>

带有所有值的 overflow-y 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.scroll {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: scroll;
      }
      div.hidden {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: hidden;
      }
      div.auto {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: auto;
      }
      div.visible {
        background-color: #8ebf42;
        height: 70px;
        width: 150px;
        overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-y 属性示例</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">
      经历过风雨，才懂得阳光的温暖。生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">
      经历过风雨，才懂得阳光的温暖。 经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>overflow-y: auto</h3>
    <div class="auto">
      经历过风雨，才懂得阳光的温暖。 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
    <h3>overflow-y: visible</h3>
    <div class="visible">
      经历过风雨，才懂得阳光的温暖。 生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
    </div>
  </body>
</html>

CSS overflow-y 属性值说明

值	描述
visible	内容不会夹在填充盒的顶部和底部边缘外部。这是此属性的默认值。
hidden	内容夹紧以垂直于填充箱中配合。没有添加滚动条。
scroll	内容夹紧以垂直于填充箱中配合。添加滚动条以查看其余内容。
auto	内容夹紧以垂直于填充箱中配合。取决于浏览器。如果内容溢出，则添加滚动条。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

CSS overflow-y 属性

overflow-y 属性指定当内容溢出元素的顶部和底部边缘时，内容是否应该隐藏、可见或者垂直滚动。
此属性是 CSS3 属性之一。

overflow-y 属性有四个主要值：visible、hidden、auto 和 scroll。

如果overflow-y 的值设置为visible，那么overflow-x 的值默认会设置为visible。

如果overflow-y 的值设置为scroll、auto 或者hidden，overflow-x 的值将设置为auto。

初始值	visible
应用于	块容器，柔性容器和网格容器。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.OverFlowy =“auto”;

overflow-x 属性可用于定义裁剪右侧和左侧。

日期：2020-06-02 22:14:43 来源：oir作者：oir

←CSS overflow-x 属性

CSS overflow属性→

语法