How do i keep fixed on screen header and footer, and make only body-content scrollable

Authoring Twine
1

I’m using Chapbook 2.2.0. How do i keep fixed on screen header and footer, and make only body-content scrollable?
I’d like to keep the page’s height constant, not passage-size-dependant. The header on top of screen, the footer at the bottom, both fixed. And the body-content, the passage content i mean, scrollable.

1 Like
2

I fully concur and second the question.

Best regards from Italy,
dott. Piergiorgio.

3

You can target the header and footer like this:

#page marginal-content[type=header] {
  position: -webkit-sticky;
  position: sticky;
  top: 2em;
  background: #ffffff;
}

#page marginal-content[type=footer] {
  position: -webkit-sticky;
  position: sticky;
  bottom: 2em;
  background: #ffffff;
}

You’ll need to fiddle with the CSS to make this look decent, but here’s a basic implementation.

4

Another quick way is to reduce the size of the body content and page:

#page {
  height: 100vh;
}
#page > body-content {
  overflow: scroll;
  justify-content: unset;
}
1 Like
5

I’ve tried both solutions but none of them works perfectly. I want a top bar, with a fixed height and position. And a bottom bar, with a fixed height and position. I want the content in the middle to be in a fixed position too and also with a fixed height, but scrollable. The only scrollable thing must be the middle. And none of the elements must dinamically resize. I have been trying to tune it in a thousand ways (not a css expert) but the only thing i achieve by now is some kind of “cssness” (css mad-ness)

6

yea, the top bar line separator don’t appear in my builds, forcing me to rewrote the layout (and sacrifice a feature…)

Best regards from Italy,
dott. Piergiorgio.