Question

我有三个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到页脚时它会在页面顶部。）

Answer 1

您可以尝试使用标题为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;
}

Answer 2

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

来源：http://css-tricks.com/snippets/css/fixed-footer/

Answer 3

尝试使用sticky footer DEMO

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

Answer 4

#header {
position: fixed;
top: 0;
left:0;
}

#footer {
position: fixed;
bottom: 0;
left: 0;
}

页眉和页脚固定

4 个答案: