如何使网页的自定义Web组件“高度:100%”？

Question

我使用Vue.js和vue自定义元素编写了一个Web组件。现在，我想让我的-chat和我的白板Web组件“高度: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);
...

并为web中的所有标记( my-whiteboard my-chat 和)执行此操作！！

问题：

components.

• It -

1. ，这对我来说不管用--似乎是错的！难道没有任何正确的方法可以这样做吗？

Answer 1

这样做的简单方法是使用

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

然而，当它们中的一个超过100 the时，它就会在没有另一个的情况下生长。所以很可能..。

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>元素，则需要相应地更改选择器(但您确实说它们是自定义元素，因此我猜它们被用作-is)。