html – The best way to make the physique occupy the entire web page whereas utilizing Vue.js?

I am making an attempt to make a login web page utilizing Vue.js for the primary time, however I am caught making an attempt to make the login web page occupy the entire web page. What ought to I do to set the peak to 100%, for the reason that CSS is being overwritten for some cause?

<template>
  <physique>

    <div id="emblem">
      Brand aqui
    </div>
    <hr width="1" measurement="500" model="0 auto" />
    <div id="login">
        <LoginForm />
    </div>
  </physique>
</template>

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

export default {
  title: "LoginPage",
  parts: { LoginForm }
}
</script>

<model scoped>

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

html, physique{
    peak:100%; /*each html and physique*/
}

physique{
    margin: 0; /*reset default margin*/
    show: flex;
    flex-direction: row;
    justify-content: heart;
    align-items: heart;
    hole:200px;
    background-image: linear-gradient(#153C66, #001B37);
}
</model>