如何用DIV实现类WinMerge的双文档对比页面（无JS/Bootstrap）

以下是完全符合需求的极简实现方案：仅用HTML+CSS完成，无需JavaScript和任何外部依赖，所有内容内嵌，完美模拟WinMerge的双栏对比布局——垂直均分左右栏、每栏独立滚动、顶部粘性标题固定显示文档名。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>双文档对比</title>
    <style>
        /* 全局重置，消除浏览器默认样式干扰 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 外层容器：Grid布局实现两栏均分 */
        .compare-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            height: 100vh;
            padding: 0 8px;
        }

        /* 单栏文档容器：垂直Flex布局，拆分标题与内容 */
        .doc-panel {
            display: flex;
            flex-direction: column;
            border: 1px solid #ccc;
        }

        /* 粘性标题：滚动时固定在顶部 */
        .doc-title {
            position: sticky;
            top: 0;
            padding: 8px 12px;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ddd;
            font-weight: 600;
        }

        /* 内容区域：独立垂直滚动 */
        .doc-content {
            overflow-y: auto;
            flex: 1;
            padding: 12px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="compare-wrapper">
        <!-- 左侧文档栏 -->
        <div class="doc-panel">
            <div class="doc-title">文档A：v1.0需求文档.txt</div>
            <div class="doc-content">
                1. 项目目标<br>
                开发轻量化团队协作工具，支持任务创建与状态追踪<br><br>
                2. 核心功能<br>
                - 用户账号体系<br>
                - 任务增删改查<br>
                - 任务状态标记（待办/进行中/完成）<br><br>
                <!-- 重复内容模拟长文档滚动 -->
                1. 项目目标<br>
                开发轻量化团队协作工具，支持任务创建与状态追踪<br><br>
                2. 核心功能<br>
                - 用户账号体系<br>
                - 任务增删改查<br>
                - 任务状态标记（待办/进行中/完成）<br><br>
                1. 项目目标<br>
                开发轻量化团队协作工具，支持任务创建与状态追踪<br><br>
                2. 核心功能<br>
                - 用户账号体系<br>
                - 任务增删改查<br>
                - 任务状态标记（待办/进行中/完成）<br><br>
            </div>
        </div>

        <!-- 右侧文档栏 -->
        <div class="doc-panel">
            <div class="doc-title">文档B：v2.0需求文档.txt</div>
            <div class="doc-content">
                1. 项目目标<br>
                开发轻量化团队协作工具，支持任务创建、状态追踪与数据导出<br><br>
                2. 核心功能<br>
                - 用户账号体系（支持第三方登录）<br>
                - 任务增删改查与标签分类<br>
                - 任务状态标记（待办/进行中/完成/暂停）<br>
                - 任务数据导出为Excel格式<br><br>
                <!-- 重复内容模拟长文档滚动 -->
                1. 项目目标<br>
                开发轻量化团队协作工具，支持任务创建、状态追踪与数据导出<br><br>
                2. 核心功能<br>
                - 用户账号体系（支持第三方登录）<br>
                - 任务增删改查与标签分类<br>
                - 任务状态标记（待办/进行中/完成/暂停）<br>
                - 任务数据导出为Excel格式<br><br>
                1. 项目目标<br>
                开发轻量化团队协作工具，支持任务创建、状态追踪与数据导出<br><br>
                2. 核心功能<br>
                - 用户账号体系（支持第三方登录）<br>
                - 任务增删改查与标签分类<br>
                - 任务状态标记（待办/进行中/完成/暂停）<br>
                - 任务数据导出为Excel格式<br><br>
            </div>
        </div>
    </div>
</body>
</html>

关键实现说明 #

• Grid布局均分两栏：通过grid-template-columns: 1fr 1fr让左右栏自动平分页面宽度，gap控制栏间距
• 粘性标题：利用position: sticky+top:0实现标题滚动时固定在栏顶部，背景色避免被下方内容遮挡
• 独立滚动：内容区域设置overflow-y: auto，配合Flex布局的flex:1自动填充剩余高度，超出内容自动显示滚动条
• 极简无依赖：所有样式内嵌，无外部资源加载，完全替代HTML4 Frames的布局效果

内容的提问来源于stack exchange，提问作者Leszek Pachura