如何使用CSS与Bootstrap实现屏幕垂直分割无横向滚动布局

Bootstrap 实现方案 #

你原有代码的问题在于默认container有固定最大宽度和内边距，且没有做响应式适配、也未设置高度占满视口，修改方案如下：

1. 把container替换为container-fluid实现全屏宽度，给row添加g-0类取消默认列间距，避免出现横向滚动条
2. 把固定宽度的col-3/col-9替换为响应式类col-md-3/col-md-9，中等以下屏幕自动变成100%宽度上下堆叠，不会出现横向溢出
3. 搭配Bootstrap内置的视口高度类快速实现全屏占比

修改后代码示例（适配Bootstrap 5.x版本）：

<div class="container-fluid vh-100">
    <div class="row g-0 h-100">
        <div id="left" class="col-md-3">
            <p>左侧占位内容</p>
        </div>
        <div id="right" class="col-md-9">
            <p>右侧占位内容</p>
        </div>
    </div>
</div>

如果需要实现左侧固定不跟随右侧内容滚动，给左侧div添加sticky-top overflow-y-auto类即可，左侧内容溢出时会单独出现滚动条。

原生CSS实现方案（无需Bootstrap） #

直接用flex布局实现，兼容性好，适配逻辑更灵活：

HTML结构 #

<div class="split-layout">
    <div class="left-panel">
        <p>左侧占位内容</p>
    </div>
    <div class="right-panel">
        <p>右侧占位内容</p>
    </div>
</div>

CSS代码 #

/* 先重置全局默认边距，避免滚动条异常 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    overflow-x: hidden; /* 全局禁止横向滚动 */
}
.split-layout {
    display: flex;
    min-height: 100vh; /* 占满整个视口高度 */
    width: 100%;
}
.left-panel {
    width: 25%; /* 对应原col-3的宽度占比 */
    /* 如果需要左侧固定不滚动，添加以下代码 */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.right-panel {
    width: 75%; /* 对应原col-9的宽度占比 */
}
/* 中等屏幕以下响应式适配，上下堆叠 */
@media (max-width: 768px) {
    .split-layout {
        flex-direction: column;
    }
    .left-panel, .right-panel {
        width: 100%;
    }
    .left-panel {
        position: static; /* 小屏取消固定定位 */
        height: auto;
    }
}

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