Css div的内容比它应该的大

我正在开发一个带有可点击日期的日历。单击特定日期时，将显示包含时间和“可用”或“不可用”的列表

关于时间表，我有一个小问题。 在我的列表的末尾总是保留着不应该出现的空白

内容放置在带有“溢出：自动”的div中 但是当我从css中删除它时，就没有空白了

真奇怪，有人能帮我吗

JSFiddle：

HTML:

更改

内容：“.”至
内容：“”

所以

谢谢！！这是固定的：D你会得到一个有用的投票，只要我得到足够的代表：没有问题，你也可以接受这是正确的答案。这样人们就知道是什么解决了这个问题。
<div id="events">
<h2>14 Oktober 2013</h2>
<div class="sub clearfix">
    <p>Uur</p>
    <p>Beschikbaar</p>
</div>
<div id="eventList">
    <div class="event clearfix">
        <p>09:00</p>
        <p>Beschikbaar</p>
    </div>
    ...
    <div class="event clearfix">
        <p>12:00</p>
        <p>Beschikbaar</p>
    </div>
</div>

#eventList
{
    width: 208px;
    border: 1px solid #363636;
    overflow-y: auto;
    max-height: 263px;
} 

.clearfix:after
{
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}