新手前端求助：如何创建含子区块的不同尺寸多CSS区块？附布局需求与代码

嘿，刚看了你的问题和代码，作为前端新手能自己尝试写结构已经很棒啦！先帮你梳理下核心问题：你想要一个全屏无滚动的页面，包含侧边栏、顶部栏、进度条、底部栏，还有主内容区里的5个固定盒子（其中c2还要做滚动），但现在用绝对定位布局遇到了元素位置难控制、计算语法错误（比如height: 80vh-2.5vh这种写法是无效的，得用calc(80vh - 2.5vh)）的问题，对吧？

先给你个核心建议：别用绝对定位做整体布局，绝对定位虽然能快速定位，但后期维护、响应式调整会非常头疼，推荐用CSS Grid来实现你的需求——它天生就是为这种复杂的网格布局设计的，能轻松搞定不同尺寸的区块和子元素排列。

第一步：整体页面布局（全屏无滚动） #

我们可以把整个页面的body设为一个Grid容器，分成两列：左侧10vw的侧边栏，右侧90vw的主内容区；然后右侧主内容区的所有元素，再通过Grid的行规则分配高度：顶部栏（10vh）、进度条（2.5vh）、中间主内容区（自动占剩余高度）、底部栏（10vh）。

第二步：主内容区的5个盒子布局 #

主内容区（.main-content）也设为Grid容器，根据你需要的c1-c5的位置定义网格行和列，比如假设你想要“左侧一个高盒子c1，右侧分成上下多个盒子c2-c5”的布局，直接设置对应的行列规则即可。

修改后的完整代码 #

HTML部分（和你原结构一致，仅优化了冗余标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-version</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="sidebar">sb</div>
    <div class="topbar">tb</div>
    <div class="progressbar">pb</div>
    <div class="main-content">
        <div class="c1">c1</div>
        <div class="c2">c2<br>这里可以加很多内容测试滚动哦<br>内容1<br>内容2<br>内容3<br>内容4<br>内容5<br>内容6<br>内容7<br>内容8<br>内容9<br>内容10</div>
        <div class="c3">c3</div>
        <div class="c4">c4</div>
        <div class="c5">c5</div>
    </div>
    <div class="bottombar">bb</div>
</body>
</html>

CSS部分（完全用Grid重构，去掉绝对定位）

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 25px;
    text-align: center;
    /* 全屏高度+禁止滚动，实现无滚动页面 */
    height: 100vh;
    overflow: hidden;
    /* 整体页面Grid布局：2列，左侧10vw，右侧占满剩余空间 */
    display: grid;
    grid-template-columns: 10vw 1fr;
    grid-template-rows: 100vh;
}

.sidebar {
    background-color: #AC92EB;
    /* 侧边栏占第一列整行 */
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* 右侧所有元素统一放在第二列 */
.topbar, .progressbar, .main-content, .bottombar {
    grid-column: 2 / 3;
}

.topbar {
    background-color: #4FC1E8;
    height: 10vh;
}

.progressbar {
    background-color: #A0D568;
    height: 2.5vh;
    font-size: 14px;
}

.main-content {
    background-color: grey;
    /* 主内容区内部Grid布局：左侧14vw列，右侧占剩余；3行等高 */
    display: grid;
    grid-template-columns: 14vw 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 1vh; /* 盒子之间的间距 */
    padding: 1vh;
}

.c1 {
    background-color: aqua;
    /* c1占左侧列的所有行 */
    grid-row: 1 / -1;
}

.c2 {
    background-color: pink;
    /* c2占右侧列的前2行 */
    grid-row: 1 / 3;
    /* 自动出现垂直滚动条 */
    overflow-y: auto;
    padding: 10px;
    text-align: left;
}

.c3 {
    background-color: orange;
}

.c4 {
    background-color: lightgreen;
}

.c5 {
    background-color: purple;
    /* c5占右侧列的第三行 */
    grid-column: 2 / 3;
}

.bottombar {
    background-color: #FFCE54;
    height: 10vh;
}

关于你问的工具和教程 #

• Grid可视化工具：不用找第三方网站，直接用浏览器开发者工具就行！比如Chrome/Firefox的DevTools，选中Grid容器后，在Layout选项卡打开“Grid overlay”，就能实时看到网格线，还能直接调整行列大小，非常直观。
• 新手教程：MDN的CSS Grid布局文档写得非常详细，从基础概念到复杂案例都有，适合从零开始学，你可以直接搜“MDN CSS Grid”就能找到。

小提示 #

1. 你原来写的height: 80vh-2.5vh是错误的，CSS里计算长度必须用calc()函数，比如calc(80vh - 2.5vh)，不过用Grid的话根本不需要手动计算高度，它会自动分配剩余空间，更省心。
2. 给c2加滚动只需要设置overflow-y: auto，当内容超过盒子高度时就会自动出现滚动条，非常简单。
3. 如果需要调整c1-c5的位置，只需要修改.main-content的grid-template-columns/grid-template-rows，以及各个盒子的grid-column/grid-row属性就行，比绝对定位灵活太多。

备注：内容来源于stack exchange，提问作者Arseniy Sleptsov