css：修复标题并滚动其余内容

Question

我想在容器div中放置标题和内容div。标题div（它没有已知的恒定高度）应该保持在容器的顶部。内容div位于标题div下方，不应溢出容器。在溢出情况下，只有内容div应滚动。

请看一下这张照片：

这是我试过的：

<div class="container">
    <div class="title">title</div>
    <div class="content">
        a very long content...
    </div>
</div>

CSS：

.container{
    width: 300px;
    height: 500px;
}
.title{
    background-color: gray;
}
.content{
    height: 100%;/*which is obviously wrong*/
    overflow: auto;
}

我不想为此使用js。

Answer 1

为了让溢出工作，你必须给内容div一个高度。这是一个看起来像你想要的JSFiddle，虽然为了让它更具动态性你可能想看看javascript。

.container{
  width: 300px;
  height: 500px;
}
.title{
  height: 1em;
  background-color: gray;
  line-height:1em;
  text-align:center;
  border:1px solid black;
}
.content{
  height:400px;
  overflow: auto;
  padding:10px;
  border:1px solid black;
}

我还添加了一些样式来匹配你的照片。

http://jsfiddle.net/m0pum906/

Answer 2

我建议你添加位置：固定在CSS中的容器类中。

.container{
    position:fixed;
    width: 300px;
    height: 500px;
}

希望这会有所帮助：）