日历插件FullCalendar去掉内部滚动条方法

SuperCookies

于 2018-05-29 09:51:03 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：插件 jquery

本文链接：https://blog.youkuaiyun.com/SuperCookies/article/details/80492211

7 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍如何在FullCalendar中移除内部滚动条并保持内容自适应显示的方法。通过调整CSS样式，实现.fc-view-container元素的box-sizing属性为border-box。此外，还介绍了如何设置日历的高度和宽度比例，以便更好地适配页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果把height高度设置为‘auto’,但是内部滚动条还在的话，可以通过检查元素你会发现.fc-view-container的box-sizing:content-box;所以做如下修改：

<style>
.fc-view-container *, .fc-view-container ::after, .fc-view-container ::before {
    box-sizing:border-box!important;
}
</style>

当想修改每一个格子的高宽比时，可以修改日历的：heigth:500(大小根据自己需要)及aspectRatio : 2, （//宽度:高度比例，默认1.35，可自定义）

修改前
修改后