Соотношение сторон содержания содержания с фиксированным заголовком высоты

Question

Я пытаюсь создать слайд-шоу изображений с фиксированным соотношением 4: 3, заполняя весь видовой экран на веб-сайте с фиксированным заголовком высоты 80 пикселей. Как я могу это сделать?

This question довольно близко, но ему не хватает фиксированного заголовка.

Любая помощь?

Макет должен быть:

-------------------------------------  - 
| Header: height = 80px, width = 100% |  | 
-------------------------------------  | 
    |   Main div   |   > Total height = 100% 
    |  Fixed ratio = 4:3  |   | 
    |   Centered   |   | 
    -----------------------------   - 


|------------------v------------------| 
      Total width = 100% 

Answer 1

Следующий CSS делает трюк:

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

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

Использование calc мы можем легко определить, что мы наш контрбукса иметь height от 100% - 80px, или calc(100vmin - 80px). Оттуда мы можем вычислить width объекта, используя тот же расчет. Я использую vmin для учета поведения на портретных экранах.