如何实现网页左侧固定、右侧可滚动的博客双界面布局？

我正在开发一个博客，想要实现单页双界面效果——左侧放置博客内容（用户界面），右侧放置管理端（开发者界面），要求左侧固定、右侧可滚动。我尝试设置height属性、overflow-y属性以及position:fixed，但整个页面还是能滚动。以下是我的CSS和HTML代码：

CSS代码 #

.h-100-vh {
    height: 100vh !important;
    overflow-y: hidden;
}

.scroll-y {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.rounded-xxlg-top {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.rounded-xxlg-bottom {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.nav-tabs .nav-link.active {
    color: white !important;
    background-color: #007bff !important;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Wicked Blog</title>
    <link rel="stylesheet" href="assets/bootstrap-4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/custom.css">
</head>

<body>
    <div class="container-fluid" style="position: sticky;">
        <div class="row mt-3">
            <div class="col-md-8 blog-left">
                <div class="shadow-sm">
                    <div class="header py-3 bg-primary text-center rounded-xxlg">
                        <img src="assets/media/images/brand/logo/logoBW.png" width="140" alt="" class="img-fluid">
                        <h1 class="text-white mt-3">Welcome to <span>Wicked Blog</span></h1>
                    </div>
                    <main class="py-5">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p><br>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p><br><br>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit cumque sint debitis quaerat explicabo optio in ipsa aliquid? Quaerat culpa suscipit impedit libero obcaecati ex. Nulla sed, quis amet ex quas itaque quo, facilis voluptatem quaerat nobis omnis autem ducimus doloribus corrupti voluptas minima illum suscipit sit perspiciatis ut placeat earum, ab ullam et? Veniam deserunt exercitationem porro impedit quisquam aspernatur, ducimus quos ipsum quibusdam ad quidem temporibus velit eveniet magni officiis, voluptate incidunt ex, eligendi sequi quae facere eaque neque quia commodi. Dolorum consequatur est harum possimus quis beatae repellat quibusdam laborum sed nesciunt facere voluptatem officia quas exercitationem, necessitatibus atque eos, nulla dolores sint. Nobis iste magni cupiditate fugit consequatur aliquid rerum atque debitis cumque exercitationem inventore non at ducimus rem, beatae nostrum minus, voluptatem ipsa? Molestiae, non. Debitis, quis.</p>
                    </main>
                </div>
            </div>
            <div class="col-md-4 blog-right shadow-lg">
                <!-- Tab panes -->
                <div class="tab-content px-3 py-4">
                    <?php if(isset($_GET['avw']) && $_GET['avw'] == 'new-blog'): ?>
                    <div class="tab-pane active">
                        <form action="" method="post">
                            <div class="form-group">
                                <label>Title</label>
                                <input type="text" class="form-control" placeholder="Enter Title">
                            </div>
                            <div class="form-group">
                                <label>Content</label>
                                <textarea name="content" class="form-control" cols="30" rows="5"></textarea>
                            </div>
                            <div class="form-group form-check">
                                <label>Category</label>
                                <select name="category" id="category" class="form-control form-select">
                                    <option value="">--Pick Category--</option>
                                    <option value="">option</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="">Cover Image</label>
                                <input type="file" name="coverImage" class="form-control form-control-file">
                            </div>
                            <div class="preview-box p-5 m-5 bg-dark">
                            </div>
                            <div class="text-center">
                                <button type="submit" name="saveBlog" class="btn btn-success">Save</button>
                                <button type="reset" class="btn btn-danger">Cancel</button>
                            </div>
                        </form>
                    </div>
                    <?php endif ?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

修复方案 #

问题出在未正确限制全局滚动，且左侧容器的固定定位和高度设置不到位。按以下步骤修改即可实现需求：

1. 更新CSS代码

/* 禁用全局滚动，避免页面整体滚动 */
html, body {
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.h-100-vh {
    height: 100vh !important;
    overflow-y: auto; /* 左侧内容过长时允许内部滚动，可选 */
}

.scroll-y {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh;
}

.rounded-xxlg-top {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.rounded-xxlg-bottom {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.nav-tabs .nav-link.active {
    color: white !important;
    background-color: #007bff !important;
}

/* 左侧固定容器样式 */
.blog-left {
    position: fixed;
    left: 0;
    top: 0;
    padding: 12px; /* 替代mt-3的间距，避免布局偏移 */
    width: calc(100% * 8 / 12); /* 匹配col-md-8的宽度 */
}

.blog-right {
    margin-left: calc(100% * 8 / 12); /* 让右侧容器从左侧容器结束的位置开始 */
    padding: 12px;
    width: calc(100% * 4 / 12); /* 匹配col-md-4的宽度 */
}

2. 调整HTML结构

• 移除最外层多余的闭合</div>
• 给左侧容器添加h-100-vh类，右侧容器添加scroll-y类
• 去掉row的mt-3类，改用CSS的padding控制间距

修改后的核心HTML：

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 blog-left h-100-vh">
                <!-- 左侧博客内容 -->
            </div>
            <div class="col-md-4 blog-right shadow-lg scroll-y">
                <!-- 右侧管理端内容 -->
            </div>
        </div>
    </div>
</body>

关键说明 #

• 先禁用html和body的全局滚动，从根源避免页面整体滚动
• 左侧容器用position:fixed固定在视口左侧，设置对应宽度和高度，内容过长时可开启内部滚动
• 右侧容器通过margin-left占据剩余空间，设置高度并开启垂直滚动，实现独立滚动效果
• 替换mt-3为padding，避免固定定位元素的间距冲突

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