<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<body>
  <div class="wrap">
    <header>ヘッダー</header>
    <main>
      <p>要素1</p>
      <p>要素2</p>
      <p>要素3</p>
      <p>要素4</p>
      <p>要素5</p>
      <p>要素6</p>
      <p>要素7</p>
      <p>要素8</p>
      <p>要素9</p>
      <p>要素10</p>
    </main>
  </div>
  <footer>
    <button class="back-pack">バックパック</button>
    <div>フッター</div>
  </footer>
</body>
body {
  margin: 0;
  padding: 0;
}
.wrap {
  height: calc(100vh - 26px);
  overflow-y: scroll;
  transition: .5s ease-in;
}
body.bp-open .wrap {
  height: calc(100vh - 100px - 26px);
}
header {
  background-color: red;
}
footer {
  background-color: green;
  height: 26px;
  transition: .5s ease-in;
}
body.bp-open footer {
  height: calc(100px + 26px);
}
body.bp-open footer div {
  height: 100px;
}
footer .back-pack {
  width: 100%;
}
footer div {
  overflow: hidden;
  height: 0;
  transition: .5s ease-in;
}
$(function() {
  $('.back-pack').on('click', function () {
    $('body').toggleClass('bp-open');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.