如何锁定 Google 边栏的顶部和底部？ [复制]

【问题标题】：How can I lock both the top and bottom of a Google sidebar? [duplicate]如何锁定 Google 边栏的顶部和底部？ [复制]
【发布时间】：2016-01-31 00:53:14
【问题描述】：

按照documentation 中的说明，我可以在侧边栏添加一个锁定的页脚。我怎样才能创建也被锁定的标题区域。

更新：有时需要找到正确的搜索词。此后我在另一篇文章中找到了答案：A true sticky footer with a fixed header?

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些额外的研究，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
谢谢，一旦我找到了正确的搜索词，我就找到了答案，并用链接更新了帖子。
你想创建一个固定的标题？
一个固定的页眉和页脚，滚动条只显示在中间，当内容太大时。

标签： css google-apps-script

【解决方案1】：

好的，我有一个固定的页眉和页脚，中间有一个动态内容，以及一个只显示动态内容的滚动条，使用 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/

【讨论】：