Как сделать пользовательский веб-компонент "высота: 100%" страницы?

Question

Я написал Веб-компонент , используя Vue. js и vue -custom-element . Теперь я хочу сделать my-chat и my-whiteboard Веб-компоненты "height: 100%". Я использую такой компонент:

// App.vue
<template>
  <splitpanes class="default-theme">
    <pane>
      <my-chat></my-chat>
    </pane>
    <pane>
      <my-whiteboard></my-whiteboard>
    </pane>
  </splitpanes>
</template>

Единственный способ, который я знаю, это установить высоту всех родителей на 100%, как это:

html,
body,
splitpanes,
pane,
my-chat,
my-whiteboard {
    height: 100%;
}

//main.js

...
// Load custom element plugin
Vue.use(vueCustomElement);

// Define web components
Vue.customElement("skyroom-whiteboard", Whiteboard);
Vue.customElement("skyroom-chat", Chat);
...

И сделать это для всех тегов внутри сети my- чат и my-whiteboard тоже !!!

Проблемы:

1. Это не работает для my- компонентов.
2. Кажется, это неправильно! Разве нет правильного способа сделать это?

Answer 1

Простой способ сделать это - использовать

my-chat, my-whiteboard {
  min-height: 100vh;
}

Однако, когда один из них станет выше 100vh, он будет расти без другого. Так что, скорее всего, ...

display: block;
height: 100vh;
overflow-y: auto;

... сделает лучше.

Вот пример (вам не нужна строка CSS после /* let's test it */, но мне пришлось добавить ее, поскольку все они являются пользовательскими элементами и по умолчанию имеют значение display из inline):

my-chat,
my-whiteboard {
  display: block;
  height: 100vh;
  overflow-y: auto;
}


/* let's check it */

my-chat,
my-whiteboard {
  box-sizing: border-box;
}

tester {
  height: 200vh;
  padding: 1rem;
}
splitpanes { display: flex; }
pane:first-child { flex-basis: 75%; }
pane:last-child { flex-grow: 1; }
body { margin: 0; }
/* don't use this line in your app, it will likely break stuff
 * I used it here because I don't have any content to break! */
.default-theme * { display: block; }

<splitpanes class="default-theme">
  <pane>
    <my-chat>
      <tester>my-chat</tester>
    </my-chat>
  </pane>
  <pane>
    <my-whiteboard>
      <tester>my-whiteboard</tester>
    </my-whiteboard>
  </pane>
</splitpanes>

Важное примечание: Если какой-либо из ваших компонентов анализируется Vue в фактических <div> элементах, вам необходимо измените селекторы соответственно (но вы сказали, что они являются пользовательскими элементами, поэтому я предполагаю, что они используются как есть).