My #app div created by Vue is not taking full size of the page

Question

I'm trying to set #app to 100% height, can't make it happen. Is div #app not considered a child of Body? i have this problem everytime, and everytime I have to work around in a different way.

Is there a way to completely avoid this to happen ? CSS:

* {
  margin: 0;
  padding: 0;
  font-family: "Nunito";
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  height: 100%;
}
body {
  transition: background 0.25s ease-in-out;
  min-height: 100%;
}
#app {
  max-height: 100%;
  min-width: 100%;
  position: relative;
}

Answer 1

You can use viewport height units for this issue, they work in terms of the height of the overall viewport.

#app {
  height: 100vh;
}