缩放并执行转换起源后，网页无法覆盖屏幕的整个高度

Question

我的网页高度应占据屏幕的整个高度。但事实并非如此。

我尝试在身体和其他许多东西上设置高度高度：100vh高度：100％。

这是我在App.vue中的代码：

      <div class="clearfix hidden-xs-only">
        <app-header></app-header>

            <div style="float: left;">
                <app-nav style=""></app-nav>
            </div>
            <div style="float: left;" >

                <router-view />

            </div>
        <div style="clear:both"></div>
        <app-footer></app-footer>
      </div>

这是我的CSS：

body {
  overflow: auto;
  height: 100vh;
  width: 100vw;
}

@media screen and (max-width: 1904px) and (min-width: 1265px) {
  html {
    min-height: 100%!important;
  }
  body {
    -webkit-transform: scale(0.65);
    transform: scale(0.65);
    width: 156%;
    min-height: 100vh!important;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}

@media screen and (max-width: 1264px) and (min-width: 961px) {
  body {
    -webkit-transform: scale(0.49);
    transform: scale(0.49);
    height: 100vh;
    width: 206%;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}


@media screen and (max-width: 960px) and (min-width: 601px) {

  body {
    overflow: auto;
    min-height: 100%!important;
    width: 323vw;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

}

我希望整个页面从页眉到页脚都能填满整个页面。但实际上，它占据了页面顶部的大约75％的高度。