How to Combine Fixed Height Header with Flexible Page Layout

How to make a flexible-height modal with fixed header

~~Applying the max-height and overflow-y settings to .body rather than to .wrap...?~~

Edit 1:

Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height ~~or px margins~~).

Edit 2:

Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).

On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.

It's a clumsy solution, but it's the only one that turned up without using JavaScript.

Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).

How to create div to fill all space between header and footer div

Flexbox solution

Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.

See JS Fiddle

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Fixed header and footers, aspect ratio body

Here's a suggestion, using the "aspect ratio box" as a centered position absolute element, inside a flex: 1; parent

Sample Image

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header,
footer {
  background-color: #cffac7;
  height: 50px;
}

#parent {
  background-color: red;
  position: relative;
  flex: 1;
}

#aspectRatio {
  background-color: #0bf;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 5;
}

<header>HEADER</header>
<main id="parent">
  <section id="aspectRatio">Aspect 3/5</section>
</main>
<footer>FOOTER</footer>

scrolling content between fixed header & footer with variable height

DEMO

Use max-height,min-height and height as percentages.Along with overflow-y:auto