Javascript 如何在Ryan fait stick页脚中拆分页眉和页脚之间的空间

我正在使用Ryan fait粘性页脚。它工作得很好。但是我需要在页眉和页脚之间分割空间，如下所示

在这里拉小提琴

我有像这样的潜水艇

<div class='content'>
      <div class='firstdiv'>
      </div>
      <div class='seconddiv'>
      </div>
  </div>

---

我想显示像红色和粉红色的盒子。问题是，如果在

第一部分

或

第二部分

中有足够的内容（超过一个屏幕），我没有足够的

内容高度，它需要像
显示：flex
一样增长，但它没有足够的内容需要覆盖整个页面。我怎样才能做到这一点。
试试这个，但高度取决于内容。您可以手动设置高度，但也必须为媒体查询编写样式


*{
保证金：0；
}
html，正文{
身高：100%；
}
.包装纸{
最小高度：100%；
高度：自动！重要；/*除非您需要IE6支持，否则不需要此行和下一行*/
身高：100%；
边距：0自动-55px；/*底部边距是页脚高度的负值*/
}
.footer、.push{
高度：55px；/*.push的高度必须与.footer的高度相同*/
}
.内容{
显示：内联flex；
证明内容：周围的空间；
宽度：100%；
身高：100%；
//背景色：红色；
}
第一组{
宽度：25%；
边框：2倍纯红；
高度：100px；
}
第二组{
宽度：75%；
边框：2倍纯绿；
高度：100px；
}

CSS粘性页脚
这个CSS粘性页脚保持不变

版权与复制；2016年Ryan Fait&mdash