div的内容应该大于它

Question

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

根据时间表，我遇到了一个小问题。 在我的列表的末尾总是保留不应该存在的空白......

内容放在带有'overflow：auto'的div中 但是当我从我的CSS中删除它时，就没有空格了。

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

JSFiddle：JSFiddle with problem

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

将content:".";更改为content:"";

所以

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

DEMO HERE