AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css实现两列布局区块独立，独立滚屏

2023-06-29 121
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： css实现两列布局区块独立，独立滚屏

写法一


使用 overflow: scroll;  属性溢出隐藏，展示滚动条，可直接复制，代码如下：

结构：

1. <!-- 容器 -->
2. <div class="container">
3. 
4. <!-- 左 -->
5. <div class="box_left">
6. <div class="box_inner_left">
7.                 测试数据1测试数据1测试数据1测试数据1
8.                 测试数据1测试数据1测试数据1测试数据1
9.                 测试数据1测试数据1测试数据1测试数据1
10.                 测试数据1测试数据1测试数据1测试数据1
11.                 测试数据1测试数据1测试数据1测试数据1
12.                 测试数据1测试数据1测试数据1测试数据1
13.                 测试数据1测试数据1测试数据1测试数据1
14.                 测试数据1测试数据1测试数据1测试数据1
15.                 测试数据1测试数据1
16. </div>
17. </div>
18. 
19. 
20. 
21. <!-- 右 -->
22. <div class="box_right">
23. <div class="box_inner_right">
24.                 测试数据2测试数据2测试数据2测试数据2
25.                 测试数据2测试数据2测试数据2测试数据2
26.                 测试数据2测试数据2测试数据2测试数据2
27.                 测试数据2测试数据2测试数据2测试数据2
28.                 测试数据2测试数据2测试数据2测试数据2
29.                 测试数据2测试数据2测试数据2测试数据2
30.                 测试数据2测试数据2测试数据2测试数据2
31.                 测试数据2测试数据2测试数据2测试数据2
32.                 测试数据2测试数据2测试数据2测试数据2
33.                 测试数据2测试数据2测试数据2测试数据2
34.                 测试数据2测试数据2测试数据2测试数据2
35.                 测试数据2测试数据2测试数据2测试数据2
36.                 测试数据2测试数据2测试数据2测试数据2
37.                 测试数据2测试数据2测试数据2测试数据2
38.                 测试数据2测试数据2测试数据2测试数据2
39.                 测试数据2测试数据2测试数据2测试数据2
40.                 测试数据2测试数据2测试数据2测试数据2
41.                 测试数据2测试数据2测试数据2测试数据2
42.                 测试数据2测试数据2测试数据2测试数据2
43.                 测试数据2测试数据2测试数据2测试数据2
44. </div>
45. </div>
46. 
47. 
48. </div>

样式：

1.       *{
2. margin: 0;
3. padding: 0;
4.         }
5. /* 容器 */
6. .container{
7. width: 300px;
8. height: 400px;
9. border: 1px solid red;
10. padding: 0px 10px;
11. display: flex;
12. justify-content: space-between;
13.         }
14. 
15. 
16. /* 左边区块容器 */
17. .box_left{
18. width: 100px;
19. height: 400px;
20. background-color: #ccc;
21. overflow: scroll;  /*溢出隐藏，展示滚动条*/
22.         }
23. .box_left::-webkit-scrollbar { display: none; }  /* 隐藏滚动条 */
24. /* 左边区块内容 */
25. .box_inner_left{
26. width: 100px;
27. height: 800px;
28. border: 1px solid blue;
29.         }
30. 
31. 
32. /* 右边区块容器 */
33. .box_right{
34. width: 160px;
35. height: 400px;
36. background-color: beige; 
37. overflow: scroll; /*溢出隐藏，展示滚动条*/
38. overflow-x: hidden;   /*隐藏x轴滚动条*/
39.         } 
40. /* 右边区块内容 */
41. .box_inner_right{
42. width: 100%;
43. height: 1000px;
44.         }
45.

此处主要用到  overflow: scroll; 将超出盒子部分的内容隐藏，并以滚动条的形式展现。

设置滚动条的样式

1. /* 设置右边模块的滚动条样式，左边写法的一样，此处未写 */
2.    /*滚动条样式 宽高*/
3.    .box_left::-webkit-scrollbar{
4.        width:5px;
5.        height:5px;
6.    }
7.    /* 滚动条轨道的样式 */
8.    .box_left::-webkit-scrollbar-track{
9.        background: rgba(95, 188, 255, 0.1);
10.         border-radius:2px;
11.     }
12.     /* 滚动条颜色 */
13.     .box_left::-webkit-scrollbar-thumb{
14.         background: red;
15.         border-radius:10px;
16.     }
17.     /* 移入效果 */
18.     .box_left::-webkit-scrollbar-thumb:hover{
19.         background: #333;
20.     }

滚动条样式主要涉及到如下CSS属性:


::-webkit-scrollbar{display:none}  /*隐藏滚动条*/

overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容

overflow: auto; 在需要时内容会自动添加滚动条

overflow: scroll; 总是显示滚动条

overflow-x: hidden; 禁止横向的滚动条

overflow-y: scroll; 总是显示纵向滚动条

width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]

height: 120px; 设置区域的高度[像素/百分比等等]

写法二



主要使用到了vh单位

css中的vh是一种视窗单位，也是相对单位。相对于视窗的高度。视窗被均分为100单位的vh。vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的

代码如下：（分为html部分和css部分）

可直接复制


html部分

<!-- 分类 -->

       <div class="center">

           <div class="left">

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

         <div>区块一</div>

           </div>

           <div class="right">

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>  

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

               <div>区块二</div>

           </div>

       </div>

Css部分

.center{

   width: 365px;

   border: 1px solid red;

   display: flex;

   justify-content: space-between;

  }

   .left{

       width: 110px;

       height: 100vh;

       background-color: red;

       overflow: auto;

   }

   .right{

       width: 250px;

       height: 100vh;

       background-color: gold;

       overflow: auto;

   }

也可以使用css的溢出滚动功能，当盒子内的元素溢出是 overflow:scroll,即可实现超两遍独立滚动的效果。左右两个盒子都设置overflow：scroll即可左右独立滚动。

文章标签：
前端开发
关键词：
CSS布局
DCodes
目录
相关文章
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
104 1
我是快乐的嘟嘟
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
160 34
html的七十二变
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局（Flexbox）：构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局（Flexbox）是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例，帮助读者快速掌握这一强大布局方法。
html的七十二变
141 3
大树营养快线
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
大树营养快线
38 0
九月天空
|
2月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
九月天空
67 4
有路有乔-六月
|
2月前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
70 3
杀死一只知更鸟debug
|
3月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记，详细介绍了flex容器和元素的相关属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等，解释了这些属性在弹性盒子布局中的作用和用法。
杀死一只知更鸟debug
59 2
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
杀死一只知更鸟debug
86 0
石小石Orz
|
4月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局？
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局？
石小石Orz
195 3
技术混子
|
4月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中，网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具，为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用，帮助读者快速掌握这一强大的网页布局工具。
技术混子
65 3