CSS Calc视口单位的解决方法？

小编典典

CSS Calc视口单位的解决方法？

css

根据我在其他答案中看到的内容，CSS视口单位还不能在calc()语句中使用。我想实现以下语句：

height: calc(100vh - 75vw)

即使不能在语句中使用视口单元，也有一些变通办法可以 使用纯CSS
来实现此目的calc()吗？还是只是CSS和HTML？我知道我可以使用javascript动态地做到这一点，但我更喜欢CSS。

阅读 521

2020-05-16

共1个答案

小编典典

在我回答这个问题之前，我想指出一下，Chrome和IE 10+实际上支持带视口单位的计算。

FIDDLE) （在IE10 +中）

解决方案（对于其他浏览器）：调整大小

1）首先将高度设为100vh。

2）将box-sizing设置为border-box-添加75vw的padding-top。这意味着填充将是内部高度的一部分。

3）只需将多余的padding-top抵消为负的margin-top-top

div
{
    /*height: calc(100vh - 75vw);*/
    height: 100vh;
    margin-top: -75vw;
    padding-top: 75vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: pink;
}

2020-05-16