Question

我已经成功使用FullCalendar，但是在flex布局中使用'parent'高度参数时遇到了麻烦。在下面的代码中，日历似乎不尊重主体部分的高度。它似乎是主要部分的高度加上页脚的高度。我已经尝试了所有我能想到的。如果您有任何建议，我将不胜感激。谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Calendar Test</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" rel='stylesheet'/>
    <style>
        html, body {
            height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    header {
        height:75px;
    }

    main {
        flex: auto;
        background-color: #ccc;
    }

    footer {
        height: 75px;
    }
</style>
</head>
<body>
<header>header</header>
<main id="calendar"></main>
<footer>footer</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<script>
$(function () {
    $('#calendar').fullCalendar({
        defaultView: 'month',
        height: 'parent',
        events: 'https://fullcalendar.io/demo-events.json'
    });
});
</script>
</body>
</html>

FullCalendar父高在Flex布局中不起作用

0 个答案: