Question

我为完整日历设置了以下内容：

<div id='fullcalendar-container'>
   <div id='fullcalendar'></div>
</div>
<div id='sub-container'>
   // content here    
</div>

具有以下CSS：

#fullcalendar-container {
    width: 100%;
    height: calc(100vh - 300px);
}

#sub-container {
    widdth: 100%;
    height: 300px;
}

完整日历通过以下javascript启动：

jQuery("#fullcalendar").FullCalendar({
   height: 'parent',
   .... bunch of other options here not directly related to height ....
});

我的问题如下：当我第一次呈现此页面时，“完整日历”中的资源及其相应的行不可见。如果我在浏览器中调整窗口大小，则会立即渲染它们。如果再将其调整为原始大小，它们将保持渲染状态，并且可以正确计算高度。

我已经检查过，当我第一次渲染页面时，FullCalendar的.fc-scroller div将使用以下CSS渲染：height: 0px。我不知道为什么会这样。

我尝试将FullCalendar初始化选项的height属性更改为function()，但是它忽略了我要发回的像素数，而是呈现了完整的日历，因此与我的#sub-container重叠。就像我将height设置为auto时一样。

在文档中，我找不到height函数的确切返回值应该是什么样，它只是说：此函数应返回像素值。。我尝试返回一个字符串，例如“ 200px”，这是上述情况发生的时间。如果我只返回一个整数，则即使在调整浏览器窗口大小之后也不会设置高度。

任何人都知道什么可能导致此问题？