如何将网页屏幕拆分为3个面板并为每个面板添加独立内容？

没问题，我帮你把这个三面板布局补全，实现每个面板独立显示内容、可单独滚动的效果。下面是完整的HTML+CSS代码，还加了一些实用的样式优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三面板布局</title>
    <style>
        /* 全局样式重置，消除默认边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh; /* 让页面高度占满整个视口 */
            overflow: hidden; /* 隐藏页面整体滚动条 */
        }

        /* 容器：用Flex布局实现三个面板横向排列 */
        .container {
            display: flex;
            height: 100%;
        }

        /* 左侧面板样式 */
        .leftpane {
            flex: 1; /* 占1份宽度，可根据需求调整比例 */
            background-color: #f0f8ff;
            border-right: 1px solid #ccc;
            padding: 20px;
            overflow-y: auto; /* 内容超出时可垂直滚动 */
            min-width: 200px; /* 设置最小宽度，防止面板过窄 */
        }

        /* 中间面板样式 */
        .middlepane {
            flex: 2; /* 占2份宽度，比左右面板宽 */
            background-color: #ffffff;
            padding: 20px;
            overflow-y: auto;
        }

        /* 右侧面板样式 */
        .rightpane {
            flex: 1;
            background-color: #f0f8ff;
            border-left: 1px solid #ccc;
            padding: 20px;
            overflow-y: auto;
            min-width: 200px;
        }

        /* 面板内的标题和内容样式优化 */
        .panel-title {
            margin-bottom: 15px;
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }

        .panel-content p {
            margin-bottom: 10px;
            line-height: 1.6;
        }

        /* 按钮样式示例 */
        .action-btn {
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }

        .action-btn:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 左侧面板：导航/菜单 -->
        <div class="leftpane">
            <h2 class="panel-title">左侧导航面板</h2>
            <div class="panel-content">
                <p>菜单项 1</p>
                <p>菜单项 2</p>
                <p>菜单项 3</p>
                <p>菜单项 4</p>
                <p>菜单项 5</p>
                <p>菜单项 6</p>
                <p>菜单项 7</p>
                <p>菜单项 8</p>
                <button class="action-btn">点击测试</button>
            </div>
        </div>

        <!-- 中间面板：主要内容 -->
        <div class="middlepane">
            <h2 class="panel-title">中间主内容面板</h2>
            <div class="panel-content">
                <b><p>This text is bold</p></b>
                <p>let's add more text</p>
                <p>bla bla bla</p>
                <p>这里可以放更长的内容，测试滚动效果：</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                <button class="action-btn">提交内容</button>
            </div>
        </div>

        <!-- 右侧面板：侧边栏信息 -->
        <div class="rightpane">
            <h2 class="panel-title">右侧信息面板</h2>
            <div class="panel-content">
                <p>用户信息：</p>
                <p>用户名：test_user</p>
                <p>等级：初级开发者</p>
                <p>最近活动：2024-05-20</p>
                <hr>
                <p>通知：</p>
                <p>您有3条未读消息</p>
                <p>系统将于今晚维护</p>
                <button class="action-btn">查看全部通知</button>
            </div>
        </div>
    </div>
</body>
</html>

关键细节说明： #

• Flex布局：用display: flex让三个面板自动横向分配空间，通过flex属性调整每个面板的宽度比例（比如左侧和右侧占1份，中间占2份），可以根据需求修改这个比例。
• 独立滚动：每个面板设置overflow-y: auto，当内容超出面板高度时，只会在当前面板内显示滚动条，不会影响其他面板。
• 样式优化：添加了面板最小宽度、边框、背景色区分，还有内容间距和按钮样式，让界面更美观实用。
• 响应式基础：设置了meta viewport，并给面板加了min-width，在小屏幕上也能保证面板不会被挤得太窄。

你可以根据自己的需求修改每个面板里的内容、颜色、宽度比例等，完全可以独立定制每个面板的功能和样式~

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