如何实现固定左右侧边栏+中间滚动内容的网页布局？

Hey there! Let's fix that misbehaving right sidebar and get your fixed-layout site working as intended. The most common issues with this setup usually come down to incorrect positioning, missing spacing for the main content, or not locking the sidebars to the viewport. Here's a complete, tested solution with explanations:

Working Solution Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Sidebars + Scrollable Content</title>
    <style>
        /* Reset default browser styles to avoid layout conflicts */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Lock viewport height to prevent body-level scrolling */
        html, body {
            height: 100%;
            overflow: hidden;
        }

        .container {
            display: flex;
            height: 100%;
        }

        /* Left fixed sidebar */
        .left-sidebar {
            width: 250px;
            background-color: #f0f0f0;
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            padding: 20px;
            border-right: 1px solid #ddd;
        }

        /* Right fixed notification sidebar */
        .right-sidebar {
            width: 200px;
            background-color: #f8f8f8;
            position: fixed;
            right: 0;
            top: 0;
            height: 100%;
            padding: 20px;
            border-left: 1px solid #ddd;
        }

        /* Scrollable main content area */
        .main-content {
            flex: 1;
            /* Match margins to sidebar widths to avoid content overlap */
            margin: 0 200px 0 250px;
            padding: 20px;
            overflow-y: auto; /* Enable vertical scroll when content overflows */
            height: 100%;
        }

        /* Demo content to test scrolling */
        .demo-content {
            height: 1500px;
            background-color: #fff;
            border: 1px solid #eee;
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-sidebar">
            <h3>Navigation</h3>
            <ul style="list-style: none; margin-top: 15px;">
                <li style="margin: 10px 0;">Home</li>
                <li style="margin: 10px 0;">Profile</li>
                <li style="margin: 10px 0;">Settings</li>
                <li style="margin: 10px 0;">Logout</li>
            </ul>
        </div>

        <div class="main-content">
            <h1>Main Content</h1>
            <div class="demo-content">
                <p>Scroll down to see how the content moves while sidebars stay fixed!</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>
            </div>
        </div>

        <div class="right-sidebar">
            <h3>Notifications</h3>
            <div style="margin-top: 15px;">
                <div style="padding: 10px; border-bottom: 1px solid #eee; margin-bottom: 10px;">
                    <p>New message from Alex!</p>
                </div>
                <div style="padding: 10px; border-bottom: 1px solid #eee; margin-bottom: 10px;">
                    <p>Your post got 8 likes!</p>
                </div>
                <div style="padding: 10px;">
                    <p>System update available</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Key Fixes & Explanations #

• Fixed Sidebar Positioning: Both sidebars use position: fixed with left: 0 (for left) and right: 0 (for right) to lock them to the viewport edges. height: 100% ensures they stretch the full screen height.
• Main Content Spacing: The main-content has margins matching the sidebar widths to prevent content from being hidden behind the sidebars.
• Scroll Control: overflow-y: auto on the main content lets only that area scroll, while overflow: hidden on html/body stops the entire page from scrolling.
• Reset Styles: The * selector resets default browser margins/paddings, and box-sizing: border-box ensures padding doesn't break your sidebar width calculations.

Common Issues in Your Original Code (Likely Culprits) #

1. You might have forgotten to set position: fixed on the right sidebar, causing it to scroll with the main content.
2. No margins on the main content, leading to overlap with the right sidebar.
3. Missing height: 100% on html/body, which breaks the fixed sidebar height.

Feel free to tweak the sidebar widths, colors, and padding to match your design! Test it by adding longer content to the main area to confirm the scroll works as expected.

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