<div class="full-page-background">
</div>

<div class="header">
</div>

<div class="main-content">
</div>

<div class="footer">
</div>

/* Header with static height, 10% of the smallest available viewport 
 * e.g. when the browser UI is visible on mobile devices */
.header {
  height: 10svh;
  background-color: #642;
}

/* Fixed footer with static height and 100% dynamic width. 
 * 10% of the smallest available viewport height e.g. when the browser UI is visible on mobile devices *
 * 100% of the dynamic available viewport width, so will adjust if a browser UI affects the width e.g. on an iPad */
.footer {
  height: 10svh;
  background-color: #246;
  position: fixed;
  bottom: 0;
  width: 100dvw;
  /* necessary due to default html and body styles */
  margin: -0.5rem;
}

/* Main content adjusts dynamically. 
 * Since we used dvh there won't be any issues even if the device keyboard shows up. */
.main-content {
  background-color: #895;
  height: calc(100dvh - 20svh); /* Adjusts height considering header and footer */
  overflow: auto;
  padding: 10px;
}

/* Full-page background using largest available viewport height and width, regardless of other elements or browser UI state. */
.full-page-background {
  height: 100lvh;
  background: #f51;
  position: fixed;
  top: 0;
  left: 0;
  width: 100lvw;
  z-index: -1; /* Ensure it stays behind other content */
}