Question

我是一个糟糕的网络程序员，试图为学校俱乐部建立一个网站。我使用fullcalendar插件显示我的Google日历活动。

麻烦的是，我使用了许多奇怪的小技巧让我的侧边栏工作，而且我认为我正在使用一些css来让我的div显示在适当的地方阻止我的日历正确显示。现在，它已经塞满我的div的顶部（正如你在事件标签中看到的那样）。我只想让日历显示在我的#events div中的标题下面。

我认为罪魁祸首在于其中一个css块：

.container div
{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 40px;
    overflow:hidden;
}

.container
{
    font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    width:80%;
    min-height: 100%;
    left:20%;

    background-color: #ffffff;
    position: relative;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
    overflow-x:hidden;
    overflow-y:scroll;
}

我使用＆＃34;位置：绝对＆＃34;在.container div中，但这只会让我所有的div都变得混乱。我真的非常擅长这一点。如果有人能帮助我弄清楚为什么这不起作用或者给我提示如何更智能地管理我的侧边栏，我将不胜感激。

该网站在此处托管： http://webbox.cs.du.edu/~samkern/DU-GDS/index.php

另外，如果需要澄清，请询问。我希望我已经提供了足够的信息。

Answer 1

我想我可能会为您解决问题：

变化

.container div {}

到

.container > div {}

你对.container div {}所说的是，.container中的 ALL div必须具有该样式。这显然不是你想要的。

使用.container＆gt; div，你只选择第一级.container中的div。

即：

<div class="container">
    <div> <!-- this div gets the styling from .container > div -->
        <div> <!-- this div doesn't get styling from .container > div --> </div>
    </div>
</div>

我希望我能为你清楚说明。

Answer 2

在最初的HTML中为您的div赋予高度，或者在用某些东西填充div时在JavaScript中。由于页面在div中没有任何内容启动，因此它没有任何高度。后来JavaScript正在添加内容，但这不会改变高度，因此会出现滚动条而一切都不可见。因此，给它足够的高度来容纳所有内容（使用em单位表示高度，而不是px单位，因此用户使用的文本高度无关紧要。）

另外检查一下你的JavaScript语法 - 例如，我在$（document.ready（））函数中有一个不需要的逗号，这应该会停止运行这段代码。

同样纠正你的HTML（通过HTML验证器运行它 - 有几个）。错误不会导致您的特定问题，但仍需要清理。它需要一个DOCTYPE，例如HTML5。 normalize.css的链接应该是href而不是src属性，标签中的for属性并不都指向字段名称。

Fullcalendar显示在页面顶部

2 个答案: