Html CSS计算视口单位解决方案？_Html_Css_Viewport Units_Css Calc

Html CSS计算视口单位解决方案？

html css

Html CSS计算视口单位解决方案？,html,css,viewport-units,css-calc,Html,Css,Viewport Units,Css Calc,从我在中看到的情况来看，CSS视口单位还不能在calc（）语句中使用。我希望达成以下声明： height: calc(100vh - 75vw) 即使在calc（）语句中不能使用视口单位，是否有一些解决方法可以使用纯CSS实现这一点？或者只是CSS和HTML？我知道我可以使用javascript动态完成，但我更喜欢CSS。作为一种解决方法，您可以使用以下事实：垂直填充百分比和边距是根据容器宽度计算的。这是一个相当丑陋的解决方案，我不知道您是否能够使用它，但它很有效：在回答这个问题之前，我想指

从我在中看到的情况来看，CSS视口单位还不能在

calc（）

语句中使用。我希望达成以下声明：

height: calc(100vh - 75vw)

即使在

calc（）

语句中不能使用视口单位，是否有一些解决方法可以使用纯CSS实现这一点？或者只是CSS和HTML？我知道我可以使用javascript动态完成，但我更喜欢CSS。

作为一种解决方法，您可以使用以下事实：垂直填充百分比和边距是根据容器宽度计算的。这是一个相当丑陋的解决方案，我不知道您是否能够使用它，但它很有效：

在回答这个问题之前，我想指出Chrome和IE 10+实际上支持使用视口单位进行计算

（在IE10+中）解决方案（适用于其他浏览器）：框大小 1）首先，将您的身高设置为100vh

2）将框大小设置为边框框-添加75vw的填充顶部。这意味着衬垫将是内部高度的f部分

3）只需用负边距顶部偏移额外的填充顶部

工作正常。。。。。
div
{
高度：计算（100vh-8vw）；
背景：#000；
溢出：可见；
颜色：红色；
}

检查这里这个css代码现在支持所有没有Opera的浏览器

生活

使用CSS网格执行此操作非常简单。诀窍是将网格的高度设置为100vw，然后将其中一行指定为75vw，将其余一行（可选）指定为1fr。根据我的假设，这将为您提供一个比率锁定的大小调整容器

示例如下：

如果您愿意，您甚至可以通过添加另一个“项目”来利用底部排水沟空间

编辑：StackOverflow的内置代码运行程序有一些副作用。跳转到codesandbox链接，您将看到实际的比率

正文{
保证金：0；
填充：0；
背景色：#334；
颜色：#eee；
}
梅因先生{
最小高度：100vh；
最小宽度：100vw；
显示：网格；
网格模板列：100%；
网格模板行：75vw 1fr；
}
.项目{
背景色：#558；
填充：2px；
保证金：1px；
}
.物品.死亡{
背景色：透明；
}


包裹沙箱
项目1

@bjb568:哦，当然可以。对不起，那样的话就行了，但我还需要一个稍微复杂一点的案子。我将改变这个问题来说明这一点。你不能使用javascript吗？你能提供更多的上下文来说明你在做什么吗？有人可能会在问题的狭义定义之外找到解决方案。您的用例是什么？我正在构建一个单屏幕应用程序（无滚动）。所有元素都需要适合屏幕，但有几个元素需要保持比例。其中一些保留比率的是屏幕上的一整行，因此根据它们的宽度，它们必须具有一定的高度。然后剩余的元素可以自由占据这些元素不使用的任何高度。这给出了100vh（原始屏幕高度）减去宽度的一些比率（75vw，虽然这不是真正的比率，我只是举个例子）。然而，我觉得一般的问题对未来的人更有用。为什么在这里大拇指朝下？这个答案似乎很好。对它表示反对的人能解释一下吗？与我的唯一区别是兼容性（请参阅和）。不知道这是否是投票失败的原因。@golmschenk MatTheCat的解决方案并不好，因为它在百分比上有

利润率顶部。使用这个解决方案。Danield，使用css translate可以改进吗？我只是好奇地问一下。@U Green先生，百分比利润率顶部怎么会是一个问题？看到唯一一个需要按照规范进行利润率行为的场景，我非常激动
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>It works!</div>
    </body>
</html>

html, body, div {
    height: 100%;
}
body {
    margin: 0;
}
div {
    box-sizing: border-box;
    margin-top: -75%;
    padding-top: 75%;
    background: #d35400;
    color: #fff;
}

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

<div>It's working fine.....</div>

div
{
     height: calc(100vh - 8vw);
    background: #000;
    overflow:visible;
    color: red;
}