如何制作页面的自定义Web Component "height:100%"？

Question

我使用 Vue.js 和 vue-custom-element 编写了一个 Web 组件。现在我想制作 my-chat 和 my-whiteboard Web 组件 "height:100%"。我正在使用该组件像这样：

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

我知道的唯一方法是像这样将所有 parents 的高度设置为 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-chat 和 my-whiteboard太!!!

问题：

这不适用于 my- 组件。
好像写错了！有没有正确的方法来做到这一点？

Answer 1

最简单的方法是使用

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

然而，当其中一个长到100vh以上时，它会在没有另一个的情况下生长。所以，最有可能的是，...

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

...会做得更好。

这是一个示例（您不需要 /* let's test it */ 行后的任何 CSS 但我必须添加它，因为它们都是自定义元素，默认情况下，它们有一个 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> 元素，您需要相应地更改选择器（但您确实说过它们是自定义元素，所以我猜它们是按原样使用的）。

如何制作页面的自定义Web Component "height:100%"？

How to make a custom Web Component "height:100%" of the page?

javascript

css

height

web-component

vue.js