css - div 的内容大于应有的内容

Question

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

对于时间表，我有一个小问题。在我的列表末尾始终保留不应该存在的空白...

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

真的很奇怪，有人可以帮助我吗？

JSFiddle：有问题的 JSFiddle

HTML：

<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>

CSS：

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

Answer 1

Change content:"."; to content:"";

So

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

DEMO HERE