的实时预览
从我在其他答案中看到的内容，CSS视口单元尚未在calc()语句中使用。我想实现的是以下陈述：
height: calc(100vh - 75vw)
即使在calc()语句中无法使用视口单元，我是否可以使用纯CSS 来实现这种解决方法？还是CSS和HTML？我知道我可以使用JavaScript动态执行此操作，但是我更喜欢CSS。
在回答此问题之前，我想指出，Chrome和IE 10 实际上支持使用视口单元的计算。
小提琴（在IE10 ）
解决方案（对于其他浏览器）：盒子大小
1）将您的高度设置为100VH。
开始2）将盒装设置设置为边框盒 - 添加75VW的填充顶。这意味着填充将是内部高度的一部分。
3）只需用负边距
来抵消额外的填充顶小提琴
div
{
/*height: calc(100vh - 75vw);*/
height: 100vh;
margin-top: -75vw;
padding-top: 75vw;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: pink;
}
作为解决方法，您可以从容器宽度中计算垂直填充百分比的事实。这是一个非常丑陋的解决方案，我不知道您是否可以使用它，但是它有效：http：//jsfiddle.net/bfwt9/
<!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>It's working fine.....</div>
div
{
height: calc(100vh - 8vw);
background: #000;
overflow:visible;
color: red;
}
现在请在此处检查此CSS代码，现在支持所有浏览器，没有Opera
只需检查一下
live
请参阅JSFIDDLE的实时预览
请参阅Codepen.io
使用CSS网格进行此操作非常容易。诀窍是将网格的高度设置为100VW，然后将其中一个行分配为75VW，其余一个（可选）为1FR。从我的想法中，这为您提供了一个比率锁定的调整容器。
示例此处：https：//codesandbox.io/s/21r4z95p7j
如果您选择的话，您甚至可以使用底部的天沟空间，只需添加另一个"项目"。
编辑：Stackoverflow的内置代码跑步者具有一些副作用。弹出到CODESANDBOX链接，您将看到行动中的比率。
body {
margin: 0;
padding: 0;
background-color: #334;
color: #eee;
}
.main {
min-height: 100vh;
min-width: 100vw;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 75vw 1fr;
}
.item {
background-color: #558;
padding: 2px;
margin: 1px;
}
.item.dead {
background-color: transparent;
}<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/index.css" />
</head>
<body>
<div id="app">
<div class="main">
<div class="item">Item 1</div>
<!-- <div class="item dead">Item 2 (dead area)</div> -->
</div>
</div>
</body>
</html>