html - Keep content div aspect ratio with fixed height header -

i'm trying create image slideshow fixed ratio of 4:3, filling whole viewport on website fixed height header of 80px. how can accomplish this?

this question pretty close, it's lacking fixed header.

any help?

the layout should be:

 -------------------------------------      - | header: height = 80px, width = 100% |     |  -------------------------------------      |     |          main div           |         > total height = 100%     |      fixed ratio = 4:3      |         |     |          centered           |         |      -----------------------------          -   |------------------v------------------|            total width = 100% 

the following css trick:

body {      margin: 0;      padding: 0;  }  header {      width: 100vw;      height: 80px;      background: red;  }  article {      /* height based on available space (100 height - 80px) */      height: calc(100vmin - 80px);      /* width based on available space , aspect ratio (height /3 * 4) */      width: calc((100vmin - 80px) / 3 * 4);      margin: 0px auto;      background: blue;  }

<header></header><article></article>

using calc can determine our bottom box have height of 100% - 80px, or calc(100vmin - 80px). there, can calculate width of object using same calculation. i'm using vmin account behaviour on portrait screens.