css中height设置100vh还是有滚动条

在做登录页面时，引入了一个图片，设置的高度为100vh，但是出现了滚动条，body也设置了margin为0 和padding为0，这是哪里的问题呢，代码如下
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body style="margin: 0;padding: 0;">
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

AdminLogin.vue代码如下

<template>
    <div class="all">
        <el-image :src="backImage" class="back-image"></el-image>
    </div>
</template>

<script lang="ts" setup>

import {getVerificationCode} from '@/views/api/login'
import {onBeforeMount, ref} from 'vue';
import * as url from "url";

onBeforeMount(() => {
    getCode()
})
const backImage = new URL("@/assets/image/index-image.png", import.meta.url).href
//const verificationCode = ref()
const getCode = () => {
    getVerificationCode("").then(function (res) {
        // 处理成功情况
        console.log(res);
        // verificationCode.value  = res.data.data.verificationCod
    })
        .catch(function (error) {
            // 处理错误情况
            console.log(error);
        })
        .then(function () {
            // 总是会执行
        });
}

</script>

<style scoped>
.back-image {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.all {
    margin: 0;
    padding: 0;
}
</style>

页面效果如下

img

不知道是哪里的问题