如何将HTML页面划分为3个可独立滚动列？页面整体保持静态

完全可以实现这种布局，核心是利用CSS的flex布局结合overflow属性控制每列的滚动行为，以下是完整实现代码：

HTML 结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿苹果笔记布局</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="layout-container">
        <!-- 第一列：文件夹列表 -->
        <div class="column folder-column">
            <h3>文件夹</h3>
            <ul>
                <li>个人笔记</li>
                <li>工作文档</li>
                <li>项目资料</li>
                <li>学习笔记</li>
                <li>生活记录</li>
                <li>旅行计划</li>
                <li>美食清单</li>
                <li>健身日志</li>
                <li>电影收藏</li>
                <li>音乐歌单</li>
                <li>书籍推荐</li>
                <li>技术教程</li>
            </ul>
        </div>

        <!-- 第二列：笔记列表 -->
        <div class="column note-column">
            <h3>个人笔记</h3>
            <ul>
                <li>2024年工作计划</li>
                <li>周末出行攻略</li>
                <li>前端学习总结</li>
                <li>读书笔记：《JavaScript高级程序设计》</li>
                <li>家庭聚会安排</li>
                <li>健身打卡记录</li>
                <li>项目需求梳理</li>
                <li>面试准备要点</li>
                <li>日常开销统计</li>
                <li>新功能想法</li>
                <li>会议纪要</li>
                <li>bug修复记录</li>
            </ul>
        </div>

        <!-- 第三列：静态文本区域 -->
        <div class="column content-column">
            <h3>2024年工作计划</h3>
            <p>1. 完成前端框架深度学习，掌握React和Vue的高级特性</p>
            <p>2. 参与3个以上企业级项目开发，积累实战经验</p>
            <p>3. 每月输出2篇技术博客，分享学习心得</p>
            <p>4. 考取相关技术认证，提升专业竞争力</p>
            <p>5. 拓展技术栈，学习Node.js后端开发</p>
            <p>6. 参与开源项目贡献，提升代码质量</p>
            <p>7. 定期参加技术沙龙和线上分享会，保持行业敏感度</p>
            <p>8. 优化个人开发流程，提高工作效率</p>
        </div>
    </div>
</body>
</html>

CSS 样式 #

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 阻止页面整体滚动 */
body {
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* 整体布局容器，flex实现三列并排 */
.layout-container {
    display: flex;
    height: 100vh; /* 占满整个视口高度 */
}

/* 通用列样式 */
.column {
    padding: 16px;
    border-right: 1px solid #eee;
}

/* 第一列：文件夹列表 */
.folder-column {
    flex: 0 0 200px; /* 固定宽度200px，不伸缩 */
    overflow-y: auto; /* 内容超出时垂直滚动 */
    background-color: #f8f9fa;
}

/* 第二列：笔记列表 */
.note-column {
    flex: 0 0 250px; /* 固定宽度250px，不伸缩 */
    overflow-y: auto; /* 内容超出时垂直滚动 */
    background-color: #ffffff;
}

/* 第三列：静态文本区域 */
.content-column {
    flex: 1; /* 自适应剩余宽度 */
    overflow-y: auto; /* 若内容过多也可滚动，按需调整 */
    background-color: #ffffff;
}

/* 列表样式优化 */
ul {
    list-style: none;
    margin-top: 12px;
}

li {
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

li:hover {
    background-color: #e9ecef;
}

h3 {
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

关键实现要点 #

• 页面滚动控制：给body设置overflow: hidden，确保只有列内部可滚动，页面整体无滚动条
• 三列布局实现：通过display: flex让三列横向排列，前两列固定宽度，第三列自适应剩余空间
• 独立滚动设置：每个列添加overflow-y: auto，当列内内容高度超过视口时自动生成垂直滚动条
• 视觉细节优化：添加边框、背景色和hover效果，贴近苹果笔记的视觉风格

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