如何添加标题div保持在顶部和垂直滚动div下面？

Question

我希望有两个div，标题和div中包含的滚动列表。

这就是我想要实现的目标：

|_______header_______|
|                    |
|   Container Div    |
|                    |
|                    |
|                    |
|                    |
|                    |
----------------------

现在，我有滚动内容div，可以自动滚动，但如何添加标题潜水

   <div id="scroller_container">
    <div class="jscroller2_up">
    <?
    echo $news;
    ?>
    </div>
</div>

CSS：

.jscroller2_up, .jscroller2_down, .jscroller2_left, .jscroller2_right {
 margin: 0;
 padding: 0;
 }

#scroller_container {
width: 30em;
height: 8em;
background: white;
 top: -300px;
left: 700px;
overflow: hidden;
}

Answer 1

使用position: fixed。在这里，我有一个4em高的标题，全高内容区域。 JSFiddle：http://jsfiddle.net/v7bd5vz9/。

HTML：

<header>Header</header>
<main>
    <p>main</p>
</main>

CSS：

header {
    position: fixed;
    width: 100%;
    height: 4em;
    background: green;
}

main {
    position: fixed;
    bottom: 0;
    top: 4em;
    width: 100%;
    background: red;
    overflow: scroll;
}