项目布局结构
┌─────────────────────────────────────┐
│ 顶部盒子 (10% 高度) │
├──────────────┬──────────────────────┤
│ 盒子A │ 盒子B │
│ (20% 宽度) │ (80% 宽度) │
│ 导航区域 │ 内容区域 │
└──────────────┴──────────────────────┘
HTML 结构
<div class="container">
<div class="box box-top">顶部盒子 (10% 高度)</div>
<div class="row-bottom">
<div class="box box-a">
<TabHeader :active-tab="activeTab" @tab-change="handleTabChange" />
</div>
<div class="box box-b">
<TabContent :active-tab="activeTab" />
</div>
</div>
</div>
CSS 实现
1. 全屏容器
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
说明：
display: flex：启用 flexbox 布局flex-direction: column：子元素垂直排列100vw：占满视口宽度100vh：占满视口高度
2. 顶部盒子
.box-top {
height: 10vh;
width: 100vw;
background-color: #ff6b6b;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.2rem;
}
说明：
height: 10vh：占视口高度的 10%display: flex：启用 flexboxalign-items: center：垂直居中justify-content: center：水平居中
3. 底部行容器
.row-bottom {
display: flex;
height: 90vh;
width: 100vw;
}
说明：
display: flex：启用 flexboxflex-direction: row（默认）：子元素水平排列height: 90vh：占视口高度的 90%width: 100vw：占满视口宽度
4. 左侧盒子（导航区域）
.box-a {
width: 20vw;
height: 90vh;
background-color: #4ecdc4;
padding: 0;
overflow: hidden;
}
说明：
width: 20vw：占视口宽度的 20%height: 90vh：占视口高度的 90%overflow: hidden：隐藏超出内容
5. 右侧盒子（内容区域）
.box-b {
width: 80vw;
height: 90vh;
background-color: #45b7d1;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 1.2rem;
}
说明：
width: 80vw：占视口宽度的 80%height: 90vh：占视口高度的 90%display: flex：启用 flexboxalign-items: center：垂直居中justify-content: center：水平居中
视口单位
vw（Viewport Width）
width: 100vw; /* 视口宽度的 100% */
width: 20vw; /* 视口宽度的 20% */
width: 80vw; /* 视口宽度的 80% */
特点：
- 1vw = 视口宽度的 1%
- 随浏览器窗口大小变化
- 适用于响应式水平布局
vh（Viewport Height）
height: 100vh; /* 视口高度的 100% */
height: 10vh; /* 视口高度的 10% */
height: 90vh; /* 视口高度的 90% */
特点：
- 1vh = 视口高度的 1%
- 随浏览器窗口大小变化
- 适用于响应式垂直布局
