Question

我会努力尽可能地清楚这一点！所以这里去了！

我一直在使用Adam Shaw的jquery插件fullCalendar。我正在对我正在进行的项目进行微调。

目的：设置fullcalendar的'version'，使其填充窗口中的文档空间，并在调整窗口大小时始终保持可见（同时保留10px的填充）右侧侧和底部侧面的窗口和日历本身。此外，它应该在日历导航下面下面的文档顶部有10px的填充。左侧原样是正确的。

问题：当您加载zip中包含的'localendar.html'时，您可能会发现一些直接问题（这可能取决于您的屏幕分辨率）。目前日历未固定在日历导航下方10px。 此外，当您调整浏览器窗口的大小时，日历会在右侧和底侧保持10px填充，但是日历的顶部在所有三个日历视图选项中根本无法正常运行。日历不得有任何溢出导致滚动条出现。

日历必须在所有面上保持10px填充（除了左侧，日历导航下方顶部仅10px）。最小高度和宽度，以便日历不能小于平均上网本分辨率（此时溢出导致滚动条是可接受的）。

- 这些行可能有帮助。

localendar.html（70-92,104-124）
fullcalendar.css（139-142 [view fullcalendar.css]
fullcalendar.js（473-492 [view fullcalendar.js]

Answer 1

您将所有元素的位置属性设置为“绝对”。当你将某些东西设置为'position：absolute'时，它将它绝对定位在设置为'position：relative'的最近父级中。它还从一般文档流中删除元素。上边距发生的情况是，由于日历不在文档流程中，因此它与上面的控件重叠。您应该从CSS中删除位置属性。

这是你应该对html页面本身的日历样式所拥有的：

    div#calendar {
    margin-left: 252px !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

我在style属性中包含了div元素，因为它为规则赋予了更多的权重。我还将'margin-left'属性的值设置为重要因为在fullcalendar.css文件中设置了另一个重要的样式。这两个一起将覆盖在该文件中应用的左边距。

我现在只能在safari中测试它，但它应该在大多数浏览器中都能正常工作。如果有帮助，请告诉我。

创建可调整大小的日历（html / css / jquery）

1 个答案: