如何用CSS实现响应式内容区+固定宽度右侧栏的同高布局？

嘿，我来帮你搞定这个布局需求～先看看你现有代码的几个核心问题：

• inline-block 元素之间会有默认的空白间隙，容易导致两个div无法在同一行完整显示
• .green-div 没有设置宽度规则，inline-block 默认是内容宽度，没法自动填充红色div之外的剩余空间
• height: 100% 需要父元素（html、body）设置明确的高度值，否则不会生效
• .red-div 没有设置靠右的定位逻辑，现在只是跟着绿色div排列，没法始终固定在页面右侧

最简洁可靠的解决方案是用 Flexbox，它天生适合这种「一侧固定宽度、另一侧自适应」的布局，还能自动保证两个div高度一致。下面是调整后的完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <style>
        html, body {
            width: 100%;
            margin: 0;
            padding: 0;
            min-height: 100vh; /* 让页面至少占满视口高度 */
            display: flex; /* 开启Flex布局 */
        }

        .green-div {
            background-color: green;
            flex: 1; /* 占据剩余所有可用空间 */
            padding: 20px; /* 可选：让内容不贴边 */
        }

        .red-div {
            background-color: red;
            width: 350px; /* 固定宽度 */
            padding: 20px; /* 可选：让内容不贴边 */
        }
    </style>
</head>
<body>
    <div class="green-div">
        <p>Green Div - 这里是网站内容区域，宽度会自动填充红色div之外的剩余空间</p>
        <p>可以添加更多内容测试高度自适应效果...</p>
    </div>
    <div class="red-div">
        <p>Red Div - 固定350px宽度，始终在页面右侧</p>
    </div>
</body>
</html>

关键逻辑说明： #

• html, body 设置 display: flex 后，两个子div会自动成为flex项目，横向排列
• .green-div 的 flex: 1 是核心：它会告诉浏览器这个元素要占据容器中除了固定宽度元素之外的所有剩余空间
• Flexbox 默认的 align-items: stretch 属性会让所有flex项目的高度自动匹配容器高度（或最高项目的高度），完美解决两个div高度一致的问题
• min-height: 100vh 确保页面至少占满整个视口高度，避免内容过少时div高度不足

如果你的项目需要兼容极老浏览器（比如IE9及以下），也可以用浮动布局替代，但Flexbox是当前的主流方案，代码更简洁易维护。

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