使用Vue.js时如何让body占据整个页面？答案

【问题标题】：How to make the body occupy the whole page while using Vue.js?使用Vue.js时如何让body占据整个页面？
【发布时间】：2022-10-01 02:53:40
【问题描述】：

我第一次尝试使用 Vue.js 制作登录页面，但我试图让登录页面占据整个页面。由于某种原因 CSS 被覆盖，我应该怎么做才能将高度设置为 100%？

<template>
  <body>

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

<script lang=\"ts\">
import LoginForm from \"@/components/login/LoginForm.vue\";

export default {
  name: \"LoginPage\",
  components: { LoginForm }
}
</script>

<style scoped>

.line{
  border-left: 6px white;
  height: 500px;
  width: 6px;
}

html, body{
    height:100%; /*both html and body*/
}

body{
    margin: 0; /*reset default margin*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:200px;
    background-image: linear-gradient(#153C66, #001B37);
}
</style>

标签： html css vue.js vuejs3

【解决方案1】：

如果您想设置body 或html 的样式，请删除<style> 标记的scoped 属性。
如果你不这样做，你只是在组件内设置<body> 或<html> 标签的样式。

请注意，您始终可以拥有

<style scoped>
/* CSS scoped for this component */
</style>

<style>
/* global style (normal CSS) */
</style>

阅读有关scoped CSS 的更多信息。

【讨论】：