问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
路人丁0417
    18212246

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

    滚动时：
    image.png

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

    image.png

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

    css
    阅读 3k
    3 个回答
    得票最新
    头像
    kumfo
    6.7k33257
    ✓ 已被采纳

    看了下你说用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>
    头像
    Meathill
      22.6k133642

      右边 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)
      头像
      丶瑶
        3921620

        右边 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>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题