html - div A固定高度，div B下方调整到窗口

Question

我有一个标题和一个内容 div。标题高度是固定的，内容div我想调整到windo高度，但是如果它的内容超过窗口高度，内容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;
}

Answer 1

这要么需要 display: table;，要么需要一个新的 CSS3 特性 - calc().

你需要支持什么？如果只是新浏览器，你可以试试这个:

.bottom {
  height: calc(100% - 100px);
}

DEMO