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

Question

There are lots of fixed footer/header variable width content posts but none seem to work for my specific use case.

The easiest way to describe what I want is a google doc's style interface where the header and footer are fixed and the content is X/Y scrollable but was part of the header scrolls away when you start scrolling down

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>

The above fiddle is what I have so far, in a working solution the border for the green content section would appear just above the blue footer which would allow the horizontal scroll bar to be present.

Also, when scrolling the content section goes underneath the fixed header which isn't ideal. I want the content section to be fully visible at all times, and grow as we scroll. Possible with CSS? Do I need some JS in here?

Answer 1

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