登陆界面设计

先写一个登录界面

<template>
  <div class="outer-container">
    <div class="form-container">
    <div class="login-title">
      收费后台管理系统
    </div>
    <el-form>
    <el-form-item label="用户名" prop="username">
    <el-input
          v-model="ruleForm.username"
          @keydown.enter.native="submitForm('ruleForm')"
          type="text"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          autocomplete="off"
          type="password"
          @keydown.enter.native="submitForm('ruleForm')"
        >
        </el-input>
      </el-form-item>
      <el-button
        class="login-button"
        :loading="loginLoading"
        type="primary"
        @click="submitForm('ruleForm')"
        >Login</el-button
      >
    </el-form>
    </div>
  </div>
</template>
<style>

.outer-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
 
}

.outer-container .form-container{
  width: 40rem;
}
.form-container .login-title{
   font-size:1.8rem;
   font-weight: bold;
   text-align: center;
   padding: 2rem 2rem 2rem 7rem;
}
.form-container .login-form{
  padding: 0px 1.4rem;
}

.login-button {
  margin-left: 77px;
}
</style>

问题：设置outer-container的高度一直都不是100%
解决：查找了一下，要让他的父级元素设置为100%，才有效。刚开始设置了一下body的高度为100%，发现还是不行，怎系研究了一下，要设置html和body的高度都为100%