页面无滚动条,里面div各自有滚动条

一、双滚动条左右布局

实现效果

实现代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        padding: 0;
        margin: 0;
      }

      .father {
        display: flex;
        flex: 1;
        overflow: hidden;
      }
      .left {
        flex: 1;
        background-color: red;
        max-height: 100vh;
        overflow-y: scroll;
      }
      .right {
        width: 300px;
        background-color: green;
        max-height: 100vh;
        overflow-y: scroll;
      }

      .ceshi {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="left">
        left
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
      </div>
      <div class="right">
        right
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
        <div class="ceshi">111</div>
      </div>
    </div>
  </body>
</html>

二、双滚动条上下布局

实现效果

实现代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .father {
        display: flex;
        width: 100%;
        flex-direction: column;
        overflow: hidden;
      }

      .top {
        height: 50px;
        background-color: aqua;
      }
      .content {
        flex: 1;
        max-height: calc(100vh - 50px);
        background-color: blueviolet;
        overflow-y: scroll;
      }
      .test {
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="top">111</div>
      <div class="content">
        content
        <div class="test">test</div>
        <div class="test">test</div>
        <div class="test">test</div>
        <div class="test">test</div>
        <div class="test">test</div>
        <div class="test">test</div>
      </div>
    </div>
  </body>
</html>
相关推荐
繁花与尘埃25 分钟前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
theOtherSky1 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
会联营的陆逊2 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over6972 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx2 小时前
搭建React Native开发环境
javascript·react native·react.js
over6972 小时前
弹性布局完全指南:从文档流到Flexbox实战
css
代码AI弗森2 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除2 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟2 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
无羡仙3 小时前
JavaScript中的继承实现方式
javascript