Vue.js中如何让页面body占满整个浏览器窗口？

问题根源 #

你犯了两个关键错误：

1. Vue组件模板里不能直接写<body>标签——Vue组件会被挂载到页面已有的<body>内部，嵌套的<body>会导致DOM结构异常，而且你的scoped样式根本无法作用到真实的页面<body>上。
2. height:100%依赖父元素的高度设置，且scoped样式限制了样式作用范围，导致html/body的高度设置不生效。

修复方案 #

1. 修正模板结构

移除模板里的<body>，改用一个根容器包裹所有内容：

<template>
  <div class="login-page">
    <div id="logo">
      Logo aqui
    </div>
    <hr width="1" size="500" style="0 auto" />
    <div id="login">
      <LoginForm />
    </div>
  </div>
</template>

2. 调整样式逻辑

把原来给<body>的样式转移到根容器上，用min-height: 100vh替代height:100%（100vh直接对应浏览器视口高度，更可靠），同时保留scoped样式（现在作用于根容器）：

<style scoped>
.login-page {
  margin: 0;
  min-height: 100vh; /* 直接占满视口高度 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 200px;
  background-image: linear-gradient(#153C66, #001B37);
}

.line{
  border-left: 6px white;
  height: 500px;
  width: 6px;
}
</style>

3. （可选）全局样式兜底

如果页面其他地方也需要全局的基础样式，可以在项目的全局样式文件（比如src/assets/global.css）里添加：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

然后在main.ts里引入这个全局样式文件。

修改后效果 #

根容器会直接占满整个浏览器视口，背景渐变和flex布局都能正常生效，不会出现留白问题。

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