html - 全日历高度不考虑周围容器

Question

我有一个 vue.js 元素，我正在将 vue-fullcalendar 集成到其中，但我遇到了一个问题 .fc-scroller fc-time-grid-container height 设置为超出周围容器的高度。

我从 fullcalendar.io 借用了一个代码笔示例来重现这种情况。我将 App.vue 文件的结构尽可能接近我的实际应用程序:https://codesandbox.io/s/p3418kmo7

当您单击“在新窗口中打开”时，可滚动区域的高度似乎被设置为一个值，但并未考虑到它不是页面上的唯一内容这一事实。我尝试设置 fullcalendar.io 属性 height和 contentHeight整体行为没有任何变化。当您强制使用高度属性时 <div class="fc-scroller fc-time-grid-container" style="overflow-x: hidden; overflow-y: scroll; height: 879px;">在 Chrome 的 html 编辑器中设置一个小于主容器的值(在我的例子中是 500px)，可滚动区域缩小并适合主容器，移除额外的滚动条。

我不太确定在这里做什么，您如何控制可滚动区域的计算高度，以便您的主容器不会溢出页面？

Answer 1

所以经过一些调试我能够弄清楚属性 contentHeight & height像我上面那样将它们传递到特定于 View 的配置中并不受到尊重。将它们添加到全局配置并将它们设置为 'auto'在我的情况下解决了，但能够独立处理每个 View 会很好。

同时包装 <full-calendar>带有 <div style='overflow-y: auto; max-height: calc(100vh-150px);">... 的模板足以解决我的问题。如果默认的 aspectRatio 计算考虑了导航栏高度等因素，那就太好了。

这是演示:https://codesandbox.io/s/mjz32jnoop