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

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 demo

纯老派CSS： ^{（没有CSS3 ）}

＆＃13;

＆＃13;

*{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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

* {
  margin: 0;
  padding: 0;
}
html,
body,
.container {
  height: 100%;
}
.topbar {
  background: grey;
  height: 40px;
}
.leftbar {
  background: blue;
  width: 30%;
  overflow-y: scroll;
}
.content-wrap {
  background: red;
  width: 70%;
}
.leftbar,
.content-wrap {
  height: calc(100% - 40px);
  float: left;
}
.content-hearer {
  height: 40px;
  background: yellow;
}
.content-footer {
  height: 40px;
  background: green;
}
.content {
  height: calc(100% - 80px);
  background: orange;
  overflow-y: scroll;
}

<div class="container">
  <div class="topbar"></div>
  <div class="leftbar">Fusce pharetra convallis urna. Etiam rhoncus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Aenean leo ligula, porttitor
    eu, consequat vitae, eleifend ac, enim. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
    erat euismod orci, ac placerat dolor lectus quis orci. Fusce a quam. Praesent nonummy mi in odio. Fusce egestas elit eget lorem. Fusce ac felis sit amet ligula pharetra condimentum. Pellentesque dapibus hendrerit tortor. Suspendisse pulvinar, augue
    ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Fusce convallis metus id felis luctus adipiscing. Vivamus
    elementum semper nisi. Nullam vel sem. Nullam sagittis. Vivamus laoreet. Aliquam erat volutpat.</div>
  <div class="content-wrap">
    <div class="content-hearer"></div>
    <div class="content">Fusce pharetra convallis urna. Etiam rhoncus. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Aenean leo ligula, porttitor
      eu, consequat vitae, eleifend ac, enim. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit
      erat euismod orci, ac placerat dolor lectus quis orci. Fusce a quam. Praesent nonummy mi in odio. Fusce egestas elit eget lorem. Fusce ac felis sit amet ligula pharetra condimentum. Pellentesque dapibus hendrerit tortor. Suspendisse pulvinar, augue
      ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Fusce convallis metus id felis luctus adipiscing. Vivamus
      elementum semper nisi. Nullam vel sem. Nullam sagittis. Vivamus laoreet. Aliquam erat volutpat.</div>
    <div class="content-footer"></div>
  </div>
</div>