html - 卷轴底部的大空间

Question

我想要 div (.ra)，其内容是:

• 一个固定的.header
• 一个包含几个或多个 .box div 的 .rcs div

由于一个人可以有很多这样的 .box div，我们需要一个卷轴。滚动使标题固定。

看起来还可以，但是我在卷轴底部有一个很大的空白区域。我不明白为什么。

完整代码:https://jsfiddle.net/yannn/n4dk2znh/1/

HTML:

<div class="ra">
    <div class="header">
        <div class="ra_name">Martin, John William Harry Slobodan Junior</div>
    </div>
    <div class="rcs" id="ra1_rcs">
        <div class="box">titre</div>
        <div class="box">titre</div>
        ...
        <div class="box">titre</div>
        <div class="box">titre</div>
        <div class="box">titre</div>

    </div>
</div>

CSS:

.ra {
        width: 28%;
        height: 200px;
        float: left;
        border-style: solid;
        margin-left: 1%;
        overflow: auto;
    }

    .header {
        background-color: white;
        color: black;
        height: 50px;
        width: 26%;
        position: absolute;
    }

    .rcs {
        margin-top: 50px;
        margin-bottom: : -50px;
        height: 150px;
    }

    .box {
        width: 60px;
        height: 40px;
        float: left;
        background-color: black;
        border-radius: 3px;
        font-size:80%;
        color: white;
        margin: 1px;
        padding: 1px;
        text-align: left;
        text-overflow: ellipsis;
}

Answer 1

那里有文字:

尝试添加:

.box {
    overflow: hidden;
}