pc端两栏布局,如何做到一栏固定位置,另一栏滚动

路人丁0417
  • 141

我用固定定位实现了这个效果,如下:
image.png

滚动时:
image.png

但是固定定位的left我用的百分比,这样就会出现一个问题,当分辨率改变的时候,百分比对应的值也会改变,那么固定定位的位置也会变化:

image.png

如果用其他定位,又不能固定住右边这块儿,所以想请教各位路过的大神有什么好的建议吗?(用纯css实现)

回复
阅读 962
3 个回答
✓ 已被采纳

看了下你说用grid布局不行,我想了下还是写了个demo,自己拷贝下来执行下看看就知道了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header {
            height: 50px;
            border-bottom: 1px #000000 solid;
            position: sticky;
            top: 0;
            z-index: 10;
            background: #aaaaaa;
        }

        .container {
            width: 1000px;
            margin-left: auto;
            margin-right: auto;
            border: 1px #aaaaaa solid;
            display: grid;
            grid-template-columns: 9fr 3fr;
            gap: 0 0;
            grid-auto-flow: row;
            grid-template-areas:"left right";
        }

        .left {
            grid-area: left;
            height: 2000px;
            border: 1px #ff0000 solid;
        }

        .right {
            grid-area: right;
            position: sticky;
            top: 50px;
            right: 0;
            height: 300px;
            border: 1px #069393 solid;
        }

    </style>
</head>
<body>
<div class="header">
    <h1>Header</h1>
</div>

<div class="container">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
</body>
</html>

右边 position: fixed。至于 left 有几种方式,要看你的内容区域宽度是怎么计算出来的,我推荐用 @media 查询,简单示范一下:

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

<style>
    .a { width: 1000px; margin: 0 auto;  }
    .b { width: 800px; height:2000px; outline:1px solid red; }
    .c { width: 200px; height:500px;  outline:1px solid blue; position: fixed; left:calc(100vw / 2 - 1000px / 2 + 800px); top: 0;  }
    @media screen and (max-width:1000px) { .c {left:800px;} }
</style>

右边 position: fixed。至于 left 有几种方式,要看你的内容区域宽度是怎么计算出来的,我推荐用 css 变量,简单示范一下:

:root
  --container-width: Npx

.container
  width var(--container-width)
  padding-right 200px // 假设侧边栏 200px 宽

.main
  width 100%

.sidebar
  position fixed
  top 0
  left 50%
  width 200px
  margin-left calc(var(--container-width) / 2 - 200px - 1rem)
  
  
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏