如何锁定谷歌侧边栏的顶部和底部

Question

按照文档中的说明，我可以在侧边栏中添加一个锁定的页脚。如何创建也被锁定的标题区域。

更新：有时需要找到正确的搜索词。我在另一篇帖子中找到了答案：一个真正的有固定页眉的粘性页脚？

Answer 1

OK我得到了一个固定的页眉和页脚，中间有一个动态内容，还有一个滚动条，只显示动态内容，使用css。

html

<div id="header">
    <button onClick="addLine()">Add</button>
</div>
<div id="content">Add Lines
    <ul id="add"></ul>
</div>
<div id="footer">Something</div>

javascript（带jQuery 2.1.3）

function addLine() {
    $("#add").append("<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>-</li>");
}

css

body {
    margin: 0;
    width:100%;
    height:100%;
}
#header, #footer {
    position: fixed;
    background:gray;
    width:100%;
}
#header {
    top:0px;
    height:100px;
}
#footer {
    bottom:0px;
    height:100px;
}
#content {
    position: absolute;
    top:100px;
    bottom:100px;
    width:100%;
    overflow: auto;
    overflow-x:hidden;
}

https://jsfiddle.net/edlisten/tq60e0u1/