html - div A は高さを固定、div B は下にウィンドウに合わせて調整

Question

ヘッダーとコンテンツ div があります。ヘッダーの高さは固定されており、コンテンツ div はウィンドウの高さに合わせたいのですが、そのコンテンツがウィンドウの高さを超えると、コンテンツ div の y スクロール バーが表示されます。

jsfiddle

HTML

<div class="top"></div>
<div class="bottom">

      Lorem ipsum dolor sit amet....
</div>

CSS

.top{
    height:100px;
    width: 100%;
    background-color: grey;
}

.bottom{
    min-height:100px;
    width: 100%;
    overflow-y: scroll;
    background-color: red;
}