CSS Calc视口单元解决方法？ [英] CSS Calc Viewport Units Workaround?

问题描述

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

From what I've seen in other answers, CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement:

height: calc(100vh - 75vw)

有一些解决方法我可以实现这使用纯CSS ，即使视口单元不能用于 calc（）语句中？还是只是CSS和HTML？我知道我可以动态使用javascript，但我更喜欢CSS。

Is there some workaround way I can achieve this using purely CSS even though the viewport units can't be used in the calc() statement? Or just CSS and HTML? I know I can do it dynamically using javascript, but I'd prefer CSS.

推荐答案

喜欢指出Chrome和IE 10+实际上支持使用视口单位的calc。

Before I answer this, I'd like to point out that Chrome and IE 10+ actually supports calc with viewport units.

1）开始设置你的身高为100vh。

1) Start of by setting your height as 100vh.

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

2) With box-sizing set to border-box - add a padding-top of 75vw. This means that the padding will be part f the inner height.

3）只需使用负边距顶部偏移额外的padding-top

3) Just offset the extra padding-top with a negative margin-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视口单元解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！