Мой #app div, созданный Vue, не принимает полный размер страницы

Question

Я пытаюсь установить #app на 100% высоты, не могу этого сделать. Разве div #app не считается дочерним элементом Body? У меня есть эта проблема каждый раз, и каждый раз мне приходится обходиться по-другому.

Есть ли способ полностью избежать этого? 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

Для этой проблемы можно использовать единицы измерения высоты видового экрана, они работают с точки зрения высоты всего видового экрана.

#app {
  height: 100vh;
}

Answer 2

Это не проблема vue, но, скорее всего, проблема CSS Высота% Вероятно, вам нужно объявить приведенный ниже код для высоты: 100% для работы с вашими делителями

html, body {
  margin:0;
  padding:0;
  height:100%;
}

P / S : Возможно, пришло время попробовать flexbox