Question

根据我在other answers中看到的情况，CSS视口单元尚未在calc()语句中使用。我想要实现的是以下声明：

height: calc(100vh - 75vw)

是否有一些解决方法我可以使用纯CSS 实现此，即使视口单元不能在calc()语句中使用？或者只是CSS和HTML？我知道我可以使用javascript动态地完成它，但我更喜欢CSS。

Answer 1

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

FIDDLE （在IE10 +中）

解决方案（适用于其他浏览器）：box-sizing

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

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

3）只需使用负边距顶部

来抵消额外的填充顶部

的 FIDDLE

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

Answer 2

作为一种解决方法，您可以使用百分比垂直填充和边距从容器宽度计算。这是一个非常丑陋的解决方案，我不知道你是否能够使用它但是很好，它有效：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;
}

Answer 3

elevation

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

just check this

直播

see Live preview by jsfiddle

See Live preview by codepen.io

Answer 4

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

此处的示例：https://codesandbox.io/s/21r4z95p7j

如果愿意，您甚至可以利用底部装订线空间，只需添加另一个“项目”即可。

编辑：StackOverflow的内置代码运行器具有一些副作用。弹出代码和框链接，您会看到实际的比例。

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>

CSS Calc视口单元解决方法？

4 个答案:

FIDDLE （在IE10 +中）

解决方案（适用于其他浏览器）：box-sizing

的 FIDDLE