CSS 属性 ----- overflow：auto 的使用

最新推荐文章于 2022-12-27 15:05:40 发布

淘淘是只狗

最新推荐文章于 2022-12-27 15:05:40 发布

阅读量9.5k

点赞数 7

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43477721/article/details/117901756

版权

CSS 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

本文介绍了CSS的overflow属性，用于处理内容溢出元素框的情况。通过实例展示了如何使用overflow:auto创建可滚动区域，分别在固定顶部和底部、Flex布局以及左右两部分内容展示场景中应用。这些示例有助于理解如何在网页布局中实现内容滚动和隐藏。

摘要由CSDN通过智能技术生成

overflow 属性规定当内容溢出元素框时发生的事情。定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的简写属性。

MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .head {
      height: 48px;
      background-color: aqua;
    }

    .c1 {
      position: absolute;
      background-color: #8aab30;
      left: 0;
      width: 118px;
    }

    .c2 {
      position: absolute;
      background-color: #0000FF;
      left: 120px;
      right: 0;
      top: 48px;
      bottom: 0;
      overflow: auto;
    }

    li {
      list-style: none;
    }
  </style>
</head>

<body>
  <div class="head"></div>
  <div class="body-body">
    <div class="c1">
      <ul>
        <li>241</li>*40个，调试的时候可以多写一点
      </ul>
    </div>
    <div class="c2">
      <ul>
        <li>241</li>*40个，调试的时候可以多写一点
      </ul>
    </div>
  </div>
</body>

</html>

顶部栏和底部栏固定不动，中间可以滚动

在这里插入图片描述
父元素使用 flex 布局，排列方向为垂直。为顶部的 header 和底部的 footer 分别设置宽高。中间的部分设置为 flex: 1，其 overflow: auto

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .header {
      width: 100%;
      height: 100px;
      background: #f99;
    }

    .content {
      width: 100%;
      height: 100%;
      overflow: auto;
      background: yellow;
      flex: 1;
    }

    .footer {
      width: 100%;
      height: 100px;
      background: #99f;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header"></div>
    <div class="content">
      <ul>
        <li>1234567890</li>*40个，调试的时候可以多写一点
      </ul>
    </div>
    <div class="footer"></div>
  </div>
</body>

</html>

很多移动端的 APP 都会实现点击左边的分类，右边出现对应的分类内容。

在这里插入图片描述

这其中就是使用 overflow: auto

父元素使用 flex 布局，对于超出的部分使用 overflow: hidden;，左半部分设置 width，overflow 设置为 auto，右半部分设置 flex 为 1，overflow 设置为 auto。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      height: 30px;
    }

    .tab-bar {
      width: 100%;
      height: 50px;
      background-color: aqua;
    }

    .menu-inner {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      top: 50px;
      display: flex;
      overflow: hidden;
    }

    .left-bar {
      width: 100px;
      background-color: #efefef;
      overflow: auto;
      height: 100%;
    }

    .right-content {
      flex: 1;
      margin-left: 100px;
      height: 100%;
      overflow: auto;
    }

    .shop-bar {
      width: 100%;
      height: 50px;
      background-color: blueviolet;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
    }
  </style>
</head>

<body>
  <div class="detail">
    <div class="tab-bar">导航栏</div>
    <div class="menu-inner">
      <div class="left-bar">
        <li>123456</li>*40个，调试的时候可以多写一点
      </div>
      <div class="right-content">
        <li>123456</li>*40个，调试的时候可以多写一点
      </div>
    </div>
    <div class="shop-bar">
      底部栏
    </div>
  </div>

</body>

</html>