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

已于 2022-12-28 15:26:28 修改
阅读量1.4k 收藏 2
点赞数 2
分类专栏： CSS 文章标签： css html 前端 javascript 实时互动
于 2022-05-16 11:02:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44793507/article/details/124673760
版权

写法一

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

结构：

<!-- 容器 -->
<div class="container">

        <!-- 左 -->
        <div class="box_left">
            <div class="box_inner_left">
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1测试数据1测试数据1
                测试数据1测试数据1
            </div>
        </div>



        <!-- 右 -->
        <div class="box_right">
            <div class="box_inner_right">
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
                测试数据2测试数据2测试数据2测试数据2
           </div>
        </div>


    </div>

样式：

      *{
            margin: 0;
            padding: 0;
        }
       /* 容器 */
        .container{
            width: 300px;
            height: 400px;
            border: 1px solid red;
            padding: 0px 10px;
            display: flex;
            justify-content: space-between;
        }


        /* 左边区块容器 */
        .box_left{
            width: 100px;
            height: 400px;
            background-color: #ccc;
            overflow: scroll;  /*溢出隐藏，展示滚动条*/
        }
       .box_left::-webkit-scrollbar { display: none; }  /* 隐藏滚动条 */
        /* 左边区块内容 */
        .box_inner_left{
            width: 100px;
            height: 800px;
            border: 1px solid blue;
        }


        /* 右边区块容器 */
        .box_right{
            width: 160px;
            height: 400px;
            background-color: beige; 
            overflow: scroll; /*溢出隐藏，展示滚动条*/
            overflow-x: hidden;   /*隐藏x轴滚动条*/
        } 
       /* 右边区块内容 */
        .box_inner_right{
            width: 100%;
            height: 1000px;
        }

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

设置滚动条的样式

/* 设置右边模块的滚动条样式，左边写法的一样，此处未写 */
		/*滚动条样式 宽高*/
		.box_left::-webkit-scrollbar{
		    width:5px;
		    height:5px;
		}
		/* 滚动条轨道的样式 */
		.box_left::-webkit-scrollbar-track{
		    background: rgba(95, 188, 255, 0.1);
		    border-radius:2px;
		}
		/* 滚动条颜色 */
		.box_left::-webkit-scrollbar-thumb{
		    background: red;
		    border-radius:10px;
		}
		/* 移入效果 */
		.box_left::-webkit-scrollbar-thumb:hover{
		    background: #333;
		}

滚动条样式主要涉及到如下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即可左右独立滚动。

兔子先森Ace
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现页面两列布局与三列布局的方法示例
09-27
主要介绍了CSS实现页面两列布局与三列布局的方法示例,包括宽度与高度的自适应的示例,需要的朋友可以参考下
左右分栏页面右侧无法出现滚动条bug
weixin_30763397的博客
11-26 224
问题记录 项目比较老了，左右分栏的页面，导航栏右边是一个iframe组成的页面，通过某个操作后，页面右侧内容区域无法实现滚动 问题查明 遇见过好几次，最后查明，总结一句话，修改了右侧页面body的overflow属性导致的，怎么出现问题的，看body overflow值的变化，操作完把overflow改回去 1.第一次遇见 是打开了对话框，这个操作，看代码后，给 对话框背后的body添加新样式，...
css设置部分区域滚动
最新发布
2201_75783276的博客
02-29 145
【代码】css设置部分区域滚动。
【CSS】实现两栏布局、三栏布局
星河梦~的博客
03-11 847
目录布局方式浮动绝对定位flex布局table布局Grid网格布局 布局方式 实现效果： 浮动 两栏布局 html代码： <div class='wrap'> <div class='left'>左侧</div> <div class='right'>右侧</div> </div> css代码： /* 公共部分 */ body,html,.wrap{ height: 100%; padding:
mac os 分栏 滚动条_如何在Mac OS X中恢复永远在线的滚动条
09-12 513
mac os 分栏 滚动条If you’re new to Macs,you might have noticed that there are no scroll bars in Finder windows, webpages, and so on.This can be difficult(and annoying) to get used to but,thankfully, yo...
左侧滚动无滚动条
gong1422425666的博客
10-31 409
在左右分栏中，当左侧的过长的时候，如果position是fixed的时候就不会滚动，<style type="text/css"> .left{position: fixed;width: 200px; background: gray;top: 0;bottom:0;height: 100%;overflow-x: hidden;} .content-border{overflow
CSS写代码将页面分为左右两个部分
weixin_35749545的博客
01-04 1111
可以使用 CSS 的 float 属性将页面分为左右两个部分。 具体方法是： 在 HTML 中创建两个 div 元素，分别表示左侧和右侧的内容。 在 CSS 中，给左侧的 div 设置 float: left，给右侧的 div 设置 float: right。 这样，左侧的 div 就会浮动在页面的左侧，右侧的 div 就会浮动在页面的右侧。 例如： .left { float: le...
CSS写一个网页框架，有导航栏，页面分为两个部分，只占总页面大小的80%，居中。...
weixin_35749440的博客
01-04 383
首先，您需要在HTML中创建一个容器元素，用于包含导航栏和内容部分。接下来，您需要在CSS中使用百分比单位将容器的宽度设置为80%。您还可以使用边距属性(如margin)将其居中。 例如： .container { width: 80%; margin: 0 auto; } 然后，您可以在容器内部创建导航栏和内容部分。例如： <div class="container"> ...
CSS写代码使页面划分为左右两个区域
weixin_35755823的博客
01-04 1739
为了在 CSS 中使页面划分为左右两个区域，你可以使用 float 属性。首先，你需要在 HTML 中创建两个容器元素(例如 div)来表示左右两个区域。然后在 CSS 中对这两个容器分别设置 float: left 和 float: right 即可。 例如： <div class="left">左侧区域</div> <div class="right">右侧...
css3滚动倾斜,JQUERY和CSS3单页倾斜分割滚动布局幻灯片特效
weixin_32039589的博客
08-04 217
这是一款非常有创意的jQuery和CSS3单页倾斜分割布局幻灯片特效。该幻灯片特效将整个屏幕倾斜分割为两个部分，一部分用于展示图片，另一部分用于描述文本。在鼠标向下滚动时，图片部分和文本部分会相互切换，效果非常的炫酷。每个单页的HTML结构使用一个div.skw-page元素进行包裹，在其内部div.skw-page__half--left是页面的左侧部分，div.skw-page__half--...
【CSS 布局】-多列布局
我有满天星辰的博客
02-10 2330
(2)设置 grid 属性, grid-template-columns: auto 1fr auto;两列布局：一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(2)通过外边距的方式使该容器的左边有左边列容器的宽度的外边距。(1)左右两列脱离文档流，并通过偏移的方式到达自己的区域。(3)使中间自适应的宽度为父级容器减去两个定宽的列。(2)使中间自适应的宽度为父级容器减去两个定宽的列。(2)设置 flex 属性,flex : 1。
CSS两列布局实现方式总结
01-21
今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。 1. absolute + margin 方式 首先想到的是利用 absolute + margin 的方式实现。先看看代码： XML/HTML Code复制内容到剪贴板   子列  主列 
CSS布局实例代码 两列布局实例
09-25
CSS两列布局，右侧固定，左侧自适应宽度.
CSS实现两栏布局，左侧固定宽高，右侧超高滚动加载
三月和九月的博客
02-19 905
要实现左侧子元素高度固定，右侧子元素超高滚动加载，并且左侧子元素与父级元素高度一致且不跟随滚动，可以使用CSS的flex布局和overflow属性来实现。左侧子元素设置为固定高度，右侧子元素设置为flex-grow: 1，以占据剩余的空间。最后，为了使左侧子元素与父级元素高度一致且不跟随滚动，可以使用position: sticky和top: 0来固定左侧子元素在父级元素的顶部。接下来，将右侧子元素设置为overflow: auto，这样当内容超过右侧子元素的高度时，会出现滚动条。
微信小程序实现滚动视图点击锚点跳转、点击左侧分栏时右侧对应内容置顶、左右分栏联动、setTimeout、findIndex、setData、parseInt、Math、random、forEach
“代码农”微信公众号
04-08 1047
目录1、关键代码2、完整代码 1、关键代码 <scroll-view style="height: {{viewHeight}}" scroll-y="true" scroll-into-view="{{selectTitle}}" scroll-with-animation="{{true}}" bindscroll="clickBindscroll"> <view id="{{item.id}}" class="right_title_content_for floorType"
Css面试题：实现两列/三列布局
lalala_dxf的博客
12-20 1432
css实现两列布局/三列布局
【总结】：CSS常用的两栏布局方法（最全面）
weixin_60297362的博客
03-23 4548
文章目录一、CSS两栏布局（左列定宽，右列自适应宽）方法一：浮动+margin方法二：定位+margin方法三：浮动+BFC方法四：flex布局方法五：able布局二、CSS两栏布局（左列不定宽，右列自适应宽） 一、CSS两栏布局（左列定宽，右列自适应宽） 最终效果： 方法一：浮动+margin HTML： <div class="container"> <div class="left">定宽</div> <div class="right">自适应
css两栏布局
Dear_pandy的博客
08-09 355
将左元素设置为固定宽度，并且向左浮动，右元素宽度设置为auto，margin-left为左元素宽度。左侧固定宽，右侧flex：1。
CSS3 多列布局
weixin_43073401的博客
05-18 549
CSS3 多列布局是一种实现网页内容分为多个列的技术，类似于报纸或杂志的排版。它可以让网页的文本更加紧凑和易读，而不需要使用浮动或定位等复杂的布局方法。要创建CSS3多列布局，我们需要指定要添加多列效果的容器元素和容器元素的多列属性。我们还可以使用其他属性来控制多列样式和折断方式。
css 两列布局 左侧滚动
09-04
CSS两列布局是指将页面分为左右两个列，并且左侧列具有滚动功能的布局方式。 实现这种布局可以使用CSS中的flexbox、grid或position等属性。下面以flexbox为例，演示如何实现左侧滚动的两列布局。 首先，HTML结构可以按照以下方式进行设置： ```html <div class="container"> <div class="left-column"> <!-- 左侧内容 --> </div> <div class="right-column"> <!-- 右侧内容 --> </div> </div> ``` 然后，使用CSS将两列布局设置为flexbox，并设置左侧列具有滚动功能： ```css .container { display: flex; } .left-column { flex: 0 0 30%; /* 设置左侧列宽度为30% */ overflow: auto; /* 设置左侧列内容溢出时显示滚动条 */ } .right-column { flex: 1; /* 设置右侧列占据剩余空间 */ } ``` 上述代码中，.container采用display: flex属性，将左右两列设置为弹性盒模型。.left-column设置了宽度为30%，.right-column则占据了剩余空间。同时，设置.left-column的overflow属性为auto，当左侧内容溢出时，会自动显示滚动条。 通过以上设置，即可实现左侧滚动的两列布局。根据实际需要，可以调整容器宽度、左侧列宽度等样式属性，以满足特定的布局要求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值