仅滚动页面的一部分,同时使它们覆盖整个屏幕

Question

实现这一目标的最佳方法是什么？

<div class=container>
 <div class=topbar></div>
 <div class=leftbar></div>
 <div class=content-wrap>
  <div class=content-hearer></div>
  <div class=content></div>
  <div class=content-footer></div>
 </div>
</div>

CSS:

.body .head{margin:0; height:100%}
.container{height:100%}
.topbar{width:100%; height:30px}
.leftbar {width: 50px; height: 100%; overflow: auto; float: left}
.content-wrap{height: 100%; overflow: auto; float: left}
.content-header{height:30px}
.content{height:100%; overflow:auto}
.content-footer{height:35px}

我想要覆盖整个页面......并且只需要在需要时滚动左栏和内容,否则将覆盖剩余空间.所有其他事情都是固定的

Answer 1

jsBin演示

纯老派的CSS: ^(没有CSS3)

*{margin:0;}
html, body{
  height:100%;
}
#top{
  position:fixed;
  width:100%;
  height:50px; /* See #wrapper bottom value */
  background:#ddd;
}
#wrapper{
  position:absolute;
  width:100%;
  bottom:0;
  top:50px; /* compensate #top height */ 
}
#left{
  position:absolute;
  background: #3BB3C3;
  height:100%;
  width:150px;   /* See #right left value */
  overflow:auto; /* make scrollable if content overflows */
}
#right{
  position:absolute;
  right:0;
  left:150px; /* compensate #left width */
  bottom:0;
  height:100%;
  background:#EE9B69;
}
#header{
  position:fixed;
  width:100%;   /* (100% cause of fixed pos) */
  height:30px;  /* see #page top value */
  background:#F8C301;
}
#page{
  position:absolute;
  top:30px;    /* header height */
  bottom:30px; /* bottom height */
  width:100%;
  overflow-y:scroll;
} 
#footer{
  background:#B8DC7C;
  position:fixed;
  width:100%; /* (100% cause of fixed) */
  bottom:0;
  height:30px; /* see #page bottom value */
}

/* DEMO ONLY */
p.long{
  height:1500px;
  border-left:5px dotted #000;
}

<div id=top>TOP</div>

<div id=wrapper>
  
  <div id=left>
    LEFT<p class=long>Long content</p>--END!
  </div>

  <div id=right>
    <div id=header>HEADER</div>
    <div id=page>
      ARTICLE CONTENT<p class=long>Long content test</p>--END!
    </article>
    <div id=footer>FOOTER</div>
  </div>

</div>