Блог

Высота моей веб-страницы должна занимать всю высоту экрана. Но это не так.

Я попытался указать высоту стиля: 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% высоты страницы сверху.