[FW7/Vue] Page Layout - how to add fixed (no scroll) area before page-content?

Questions
1

Hey guys, I sorry for posting this beginners Q once again. I’m trying to figure out how to place objects onto a page’s non scrolling area (like the Navbar), i.e. prior page-content. Is there some correct way of doing this, our it just a matter of some css hack?

When adding a div, prior the page-content, it shows up as expected above the scrolling area, however when scrolling down the last portion of the page text isn’t visible (scrolling is to short).

about-bottom
about-bottom1536×864 23.4 KB

Thanks guys!

<template>

<!-- text block before page scrolling area -->	

<div class="upper-area">
  Paragraph text goes here
</div>

<!-- start page scroll area -->		

<f7-page-content>

	Text block goes here
	
</f7-page-content>
2

Put it under fixed slot:

<template #fixed>
  <div class="upper-area">
     Paragraph text goes here
  </div>
</template>

And add some extra styles like position:absolute and others you may need

3

Now that is what I call - No Limits :slight_smile:

Your reply is Much obliged - all the best!