html如何使用overflow-y

57次阅读
没有评论

overflow-y 属性是用于控制垂直方向上的溢出内容的展示方式,有以下几种可选值:

  • visible:默认值,溢出内容会显示在元素框之外。
  • hidden:溢出内容会被隐藏。
  • scroll:会显示垂直滚动条,可以滚动查看溢出内容。
  • auto:会自动选择展示滚动条或者不展示滚动条,具体表现取决于是否有溢出内容。

下面是一个使用 overflow-y 的完整 HTML5 页面示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Overflow-y Example</title>
  <style>
    .container {
      width: 300px;
      height: 100px;
      border: 1px solid black;
      overflow-y: scroll;
    }

    .content {
      width: 280px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="content">砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的
    砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的
    砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的
    砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的
    砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的
    砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的砂锅问过的</div>
</div>
</body>
</html>

在上面的示例中,.container 元素设置了 overflow-y: scroll 属性,表示如果 .content 元素高度超出了 .container 元素的高度,就会显示垂直滚动条,可以通过滚动条查看溢出的内容。

同时,.content 元素的高度设置为 200px,超出了 .container 元素的高度,因此会出现垂直滚动条,滚动条出现后可以拖动滚动条或者使用鼠标滚轮来查看溢出的内容。

正文完
 
评论(没有评论)