Question

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

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

Answer 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/

如何锁定Google侧边栏的顶部和底部？

1 个答案: