Solved: Fixed top, scrollable bottom

by kerrydp

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/framework7-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/framework7-bundle.min.js"></script>

    <!-- App root element -->
    <div id="app">

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">

          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Scroll test</div>
            </div>
          </div>

          <!-- Bottom Toolbar -->
          <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
              <!-- Toolbar links -->
              <a href="#" class="link">Link 1</a>
              <a href="#" class="link">Link 2</a>
            </div>
          </div>

          <div class="tabs">
           <div class="tab tab-active">
             <div id="bigfixedblock">
          <p>
          This is a big fixed content block.  It should remain fixed, even when page-content scrolls past the height of the viewport.</p>
          </div>
          
          <!-- Scrollable page content -->
          <div id="scrollarea" class="page-content">
            <p>Page content to fill the height, requiring a scroll.</p>
            <ul>
              <li>Sample content</li>
              <li>Sample content</li>
              <li>Sample content</li>
            </ul>
            <hr/>
            <p>Page content to fill the height, requiring a scroll.</p>
            <ul>
              <li>Sample content</li>
              <li>Sample content</li>
              <li>Sample content</li>
            </ul>
            <hr/>
            <p>Page content to fill the height, requiring a scroll.</p>
            <ul>
              <li>Sample content</li>
              <li>Sample...

CSS

#bigfixedblock {
  background-color: red;
  color: white;
  /*height: calc(230px + var(--f7-navbar-height));*/
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 2.5em;
}

#scrollarea {
  position: absolute;
  width: 100%;
}

JavaScript

var app = new Framework7({
  // App root element
  el: '#app',
  theme: 'ios'
});

var mainView = app.views.create('.view-main');