Html 使用'；高度：自动'；对于fullcalendar timeGridWeek视图

我想有一个完全可见的完整日历周网格，没有滚动条。根据文件，我应该将高度设置为“自动”。这将适合网格，并且没有不可见的滚动条。但在使用timeGridWeek视图时，并非所有小时都是accessabel

我创建了一个小测试应用程序：

在测试用例中，您可以看到它没有滚动条，但并非所有的时隙都可见

我发现我可以通过改变一些css来控制它：

.fc.fc时间网格插槽{
高度：12px；/*这将更改实际时隙高度*/
}
.fc.fc滚动网格段主体表{
字体大小：1px；/**这允许我使时间段小于原始字体大小*/
}

但是我认为改变css字体大小不是一个好办法。有人有更好的方法处理这个案子吗

---

谢谢

这个问题与fullCalendar没有直接关系。问题出在您放置的容器上

您已将整个主体设置为溢出：隐藏，然后将日历容器设置为固定位置，其边界为视口的边缘

不幸的是，尤其是在代码笔中（代码占据了屏幕的一半），实际上没有足够的空间将日历放入视口，因此它向下溢出-但是您已经告诉CSS将此区域隐藏起来

如果您只是简单地摆脱了所有这些限制，那么它可以正常工作-将您的CSS减少到以下内容：

html, body {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.fc-header-toolbar {
  /*
  the calendar will be butting up against the edges,
  but let's scoot in the header's buttons
  */
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

日历本身没有滚动条（根据文档）。您的整个页面确实如此，但这只是因为视口不够大，无法容纳日历。如果有足够高的视口，则不会出现滚动。您需要考虑到不同的设备和浏览器大小不同这一事实

演示：