Javascript 部分固定的页眉、固定的页脚和可变宽度的内容，随着内容的增长，这些内容可以在X和Y方向上滚动

有很多固定页脚/页眉可变宽度的内容帖子，但似乎没有一篇适合我的特定用例

描述我想要的最简单的方式是一个google文档风格的界面，其中页眉和页脚是固定的，内容是X/Y滚动的，但是当你开始向下滚动时，页眉的一部分会被滚动掉

HTML，正文{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
div{
填充：10px；
}
.标题{
背景：轻珊瑚；
边框：10px固体印度红；
}
.固定收割台{
位置：粘性；
顶部：0px；
背景：金；
边框：10px实心黄花；
}
.内容{
溢出y：滚动；
溢出-x：滚动；
身高：100%；
背景：黄绿色；
边框：10px实心橄榄色；
}
.固定页脚{
位置：固定；
底部：0px；
背景：淡蓝色；
边框：10px实心钢蓝色；
宽度：100%；
}
非固定标题内容
固定标题内容
某些内容将水平溢出aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
固定页脚内容

上面的提琴是我到目前为止所做的，在一个可行的解决方案中，绿色内容部分的边框将显示在蓝色页脚的正上方，这将允许出现水平滚动条

---

此外，当滚动内容部分时，固定标题下方会出现不理想的内容。我希望内容部分在任何时候都完全可见，并随着我们的滚动而增长。可以使用CSS吗？我需要一些JS吗？

您可以将固定项目包装在容器

div

中，并使用flexbox以您想要的方式进行布局：

您不使用position:fixed on the content div的任何原因？我需要能够最初滚动以隐藏大部分标题。如果是固定位置，我该怎么做？

HTML, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div {
  padding: 10px;
}

.header {
  background: LightCoral;
  border: 10px solid IndianRed;
}

.fixed-header {
  position: sticky;
  top: 0px;
  background: Gold;
  border: 10px solid GoldenRod;
}

.content {
  overflow-y: scroll;
  overflow-x: scroll;
  height: 100%;
  background: YellowGreen;
  border: 10px solid OliveDrab;
}

.fixed-footer{
  position: fixed;
  bottom: 0px;
  background: LightSteelBlue;
  border: 10px solid SteelBlue;
  width: 100%;
}

<div class="header">
  <h1>Non fixed header content</h1>
</div>
<div class="fixed-header">
  Fixed header content
</div>
<div class="content">
  Some content that will overflow horizontally aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="fixed-footer">
  Fixed footer content
</div>