如何实现含100vh宽度通栏的左固定右自适应双列HTML页面

Got it，这个布局需求很清晰，我给你两种实现方案——纯CSS和SCSS版本，都能完美满足你的要求，完全不需要表格或JavaScript。先提前说个小提醒：100vh是视口高度单位，如果你的真实需求是让通栏占满整个视口宽度，建议换成100vw（视口宽度），因为100vh的宽度会随视口高度变化，比如竖屏手机上会超出屏幕，横屏时会比屏幕窄。不过我还是先严格按你指定的100vh来实现，你可以根据实际情况调整。

核心思路 #

• 重置浏览器默认的margin/padding，避免意外间距
• 顶部通栏直接设置width: 100vh
• 用浮动实现两列布局，左侧固定宽度，右侧用calc()计算剩余空间（总宽度-左侧宽度）
• 给两列的父容器添加清除浮动的样式，防止高度塌陷

纯CSS实现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>100vh Width Layout</title>
    <style>
        /* 全局重置，消除浏览器默认样式干扰 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 顶部通栏 */
        .top-bar {
            width: 100vh;
            background-color: #2c3e50;
            color: #fff;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        /* 两列容器：清除浮动，避免高度塌陷 */
        .layout-container {
            width: 100vh; /* 和顶部通栏宽度保持一致 */
            overflow: hidden; /* 简单的清除浮动方式 */
        }

        /* 左侧固定宽度列 */
        .sidebar {
            float: left;
            width: 200px; /* 可根据需求修改固定宽度 */
            background-color: #3498db;
            min-height: 500px; /* 示例高度，按需调整 */
        }

        /* 右侧自适应剩余空间列 */
        .main-content {
            float: right;
            width: calc(100vh - 200px); /* 总宽度减去左侧固定宽度 */
            background-color: #ecf0f1;
            min-height: 500px; /* 示例高度，按需调整 */
        }
    </style>
</head>
<body>
    <div class="top-bar">顶部通栏（宽度100vh）</div>
    <div class="layout-container">
        <div class="sidebar">左侧固定宽度列</div>
        <div class="main-content">右侧自适应剩余空间列</div>
    </div>
</body>
</html>

SCSS实现代码（更灵活易维护） #

如果用SCSS，我们可以把固定值抽成变量，后续修改布局参数会非常方便：

// 全局变量，统一管理布局参数
$container-width: 100vh;
$sidebar-width: 200px;
$top-bar-height: 80px;

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.top-bar {
    width: $container-width;
    height: $top-bar-height;
    background-color: #2c3e50;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.layout-container {
    width: $container-width;
    // 更可靠的clearfix方案，避免overflow:hidden的局限性
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}

.sidebar {
    float: left;
    width: $sidebar-width;
    background-color: #3498db;
    min-height: 500px;
}

.main-content {
    float: right;
    // SCSS中使用calc需要用#{}包裹变量
    width: calc(#{$container-width} - #{$sidebar-width});
    background-color: #ecf0f1;
    min-height: 500px;
}

关键细节说明 #

1. box-sizing: border-box：确保元素的padding和border不会额外增加宽度，避免布局超出预期
2. 清除浮动：如果不用overflow: hidden或clearfix伪元素，父容器会因为子元素浮动而高度塌陷，影响后续布局
3. calc()函数：精确计算右侧列的宽度，保证两列总宽度刚好等于100vh，且紧密排列无间距

内容的提问来源于stack exchange，提问作者Sean B. Durkin