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

Question

我正在尝试创建一个固定比例为 4:3 的图像幻灯片，用 80 像素的固定高度标题填充网站上的整个视口(viewport)。我怎样才能做到这一点？

This question非常接近，但缺少固定 header 。

有什么帮助吗？

布局应该是:

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