PC端两栏布局：如何解决一栏固定一栏滚动且位置随分辨率不变的问题？-css教程-PHP中文网

PC端两栏布局：如何解决一栏固定一栏滚动且位置随分辨率不变的问题？

霞舞

发布： 2025-02-27 08:48:11

原创

1052人浏览过

pc端两栏布局：如何解决一栏固定一栏滚动且位置随分辨率不变的问题？

PC端两栏布局：固定栏与滚动栏的完美结合

在网页设计中，经常需要实现两栏布局，其中一栏固定，另一栏可滚动。本文将介绍如何利用CSS巧妙解决这个问题，特别是如何避免因分辨率变化导致固定栏位置偏移的问题。

以往使用position: fixed结合百分比实现固定栏，但百分比会随分辨率变化，导致位置不稳定。单纯使用其他定位方式又无法达到固定效果。

最佳解决方案：结合CSS Grid布局和position: sticky属性。

猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

查看详情

以下代码示例演示了如何实现：

<code class="html"><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>两栏布局</title>
    <style>
        .header {
            height: 50px;
            border-bottom: 1px solid #000;
            position: sticky;
            top: 0;
            z-index: 10;
            background: #aaa;
        }

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

        .left {
            grid-area: left;
            height: 2000px;
            border: 1px solid #f00;
            overflow-y: auto; /* 允许左侧栏滚动 */
        }

        .right {
            grid-area: right;
            position: sticky;
            top: 50px;
            right: 0;
            height: 300px;
            border: 1px solid #069393;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>页眉</h1>
    </div>

    <div class="container">
        <div class="left">
            左侧内容
        </div>
        <div class="right">
            右侧内容
        </div>
    </div>
</body>
</html></code>

登录后复制

代码说明：