有很多固定的页脚/页眉可变宽度的内容,但似乎都不适用于我的特定用例。

描述我想要的最简单方法是使用google doc的样式界面,其中页眉和页脚是固定的,内容是X / Y可滚动的,但是当您开始向下滚动时,页眉的一部分会滚开

https://jsfiddle.net/zve0mb5m/

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>


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

同样,在滚动时,内容部分位于固定标题的下面,这是不理想的。我希望内容部分在任何时候都是完全可见的,并随着滚动而增长。可以用CSS吗?我这里需要一些JS吗?

最佳答案

您可以将固定项目包装在容器div中,并使用flexbox对其进行布局:http://jsfiddle.net/38m5d13r/

10-05 20:52
查看更多