试图使用css使顶部div可滚动和底部div固定而不可滚动

Question

我想要一个可滚动的top / main / content部分，如果它的内容太大则会滚动，底部有一个较小的固定大小部分。它无法滚出视图。

开始建立我发现Half fixed, half scrollable layout that can be scrolled... CSS

的帖子

我已将它转换为更接近我想要的内容.. https://jsfiddle.net/caseycupp/vp8pnstt/5/

<div class="Container">
<div class="Header">
<div class="HWrapper">
  <div class="HInsideContent">
    <p> header </p>
    <p> header </p>
    <p> header </p>
    <p> header </p>
    <p> header </p>
    <p> header </p>
    <p> header </p>
    <p> header </p>
    <p> header </p>
    <p> header </p>
  </div>
</div>
</div>
<div class="Content">
<div class="Wrapper">
  <div class="InsideContent">
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>
    <p>this will scroll</p>

  </div>
</div>

      * {
  margin: 0;
  padding: 0;
}

html,
body,
.Container {
  height: 100%;
}

.Container:before {
  content: '';
  height: 100%;
  float: left;
}

.Header {
  background-color: lightgreen;
  height: 150px;
}

.Content {
  position: relative;
}

.Content:after {
  content: '';
  clear: both;
  display: block;
}

.Header:before {
  /*content: '';
clear: both;
display: block;*/
}

.Wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.HWrapper {
  /* position: absolute;
width: 100%;
height: 100%;
*/
}

.InsideContent {
  height: 100%;
  background-color: purple;
  overflow: auto;
}

.HInsideContent {
  /*height: 100%;  
background-color: yellow;
overflow: auto;
}*/

但我无法让它翻转/反转。 （可滚动的顶部）固定大小的页脚下面）

Trying to flip this sample