使用固定高度标题保持内容 div 纵横比

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