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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

height: calc(100vh - 75vw)

即使不能在语句中使用视口单元，也有一些变通办法可以 使用纯CSS

来实现此目的calc()吗？还是只是CSS和HTML？我知道我可以使用javascript动态地做到这一点，但我更喜欢CSS。

回答：

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

回答：

回答：

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;
}

以上是 CSS Calc视口单位的解决方法？ 的全部内容， 来源链接： utcz.com/qa/417263.html

回到顶部