html - 页眉和页脚固定

我有三个div：页眉，内容和页脚

<div id="topBar" class="rounded" >
  <a id="close" ></a>
</div>

  <div id="contentHolder">

  </div>
  <div id="bottomBar">
  <div>

的CSS

#topBar{
    height:40px;
    background:linear-gradient(#6FACD5, #497BAE) repeat scroll 0% 0% #5E87B0;
    border:1px solid #fff;
    margin-bottom:15px;
    position:relative;
    width:100%;
    color:#777;
    text-shadow:1px 1px 0 #FFFFFF;
}


#contentHolder{
    height:80%;
    width:100%;
    max-height: 80%;
    margin-bottom:20px;
    float:left;
}


#bottomBar{
    background:linear-gradient(#6FACD5, #497BAE) repeat scroll 0% 0% #5E87B0;
    position:relative;
    padding:10px;
    border:1px solid #fff;
    clear: left;
    width: 100%;
}

如何使用CSS使页眉和页脚始终可见并且仅内容可滚动？
目前，所有内容均可滚动。 （我在页眉中添加了固定位置，并且可以正常工作，但是当我在页脚中添加了固定位置和margin-bottom：20px时，它位于页面顶部。）

最佳答案

您可以使用position: fixed; top 0作为页眉，而position: fixed; bottom 0作为页脚，尝试这样做：

JSFIDDLE DEMO

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    top: 0;
}
#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}
footer {
    width: 100%;
    height: 60px;
    background: green;
    position: fixed;
    bottom: 0;
}

关于html - 页眉和页脚固定，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25785113/