Vue应用首页全屏配置：主窗口无滚动条，滚动条仅在bottom-center容器

要实现页面全屏且主窗口无滚动条，仅让.bottom-center容器显示滚动条，需要调整布局的高度约束和滚动设置，以下是修改后的完整代码：

主组件代码 #

<script setup>
import Comp from './Comp.vue';
</script>
<template>
  <div class="root">
    <div style="font-size:30px">menu</div>
    <Comp></Comp>
  </div>
</template>
<style>
/* 让根元素和body占满整个视口，隐藏全局滚动条 */
html, body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%; /* 继承body的高度 */
}

/* 让Comp组件占满menu之外的剩余空间 */
.root > Comp {
  flex: 1;
  overflow: hidden;
}
</style>

Comp.vue代码 #

<template>
  <div class="container">
    <div class="top-left" style="background:red">top-left</div>
    <div class="top-center" style="background:blue">top-center</div>
    <div class="top-right" style="background:green">top-right</div>
    <div class="bottom-left" style="background:yellow">bottom-left</div>
    <div class="bottom-center" style="background:white">
      <!-- 内部嵌套滚动容器，避免grid布局影响滚动计算 -->
      <div class="scroll-content">
        <div v-for="item in [1,2,3,4,5,6,7]" :key="item" style="height:150px">{{item}}</div>
      </div>
    </div>
    <div class="bottom-right" style="background:grey">bottom-right</div>
  </div>
</template>
<style>
.container {
  display: grid;
  width: 100%;
  height: 100%; /* 继承父组件的高度 */
  grid-template-columns: 5rem 18rem 1fr;
  grid-template-rows: 4rem 1fr;
  /* 修正grid-template-areas的语法错误 */
  grid-template-areas:
    "top-left top-center top-right"
    "bottom-left bottom-center bottom-right";
}

.top-left { grid-area: top-left; }
.top-center { grid-area: top-center; }
.top-right { grid-area: top-right; }
.bottom-left { grid-area: bottom-left; }
.bottom-center { grid-area: bottom-center; }
.bottom-right { grid-area: bottom-right; }

.bottom-center {
  /* 确保容器本身不滚动，让内部滚动容器处理 */
  overflow: hidden;
}

.scroll-content {
  height: 100%;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}
</style>

修改说明 #

• 全局高度约束：给html和body设置height:100vh和overflow:hidden，确保页面占满视口且全局无滚动条。
• Flex布局适配：.root设置height:100%，并让子组件Comp通过flex:1占满menu下方的剩余空间。
• Grid布局修正：修复grid-template-areas的语法错误，给每个网格项指定对应的grid-area，确保布局正确。
• 滚动容器优化：在.bottom-center内部嵌套scroll-content容器，避免Grid布局的高度计算干扰滚动逻辑，确保只有该容器在内容超出时显示垂直滚动条。

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