保持内容div宽高比与固定高度标题

Question

我正在尝试创建一个固定比例为4：3的图片幻灯片，将整个视口填充到固定高度标题为80px的网站上。我怎么能做到这一点？

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来说明纵向屏幕上的行为。