65

从我在其他 答案中看到的情况来看，CSS 视口单元还不能在calc()语句中使用。我想要实现的是以下声明：

height: calc(100vh - 75vw)

即使在声明中不能使用视口单元，是否有一些解决方法可以使用纯 CSScalc()来实现？还是只是 CSS 和 HTML？我知道我可以使用 javascript 动态地做到这一点，但我更喜欢 CSS。

4

4 回答 4

78

在我回答这个问题之前，我想指出 Chrome 和 IE 10+ 实际上支持带有视口单元的 calc。

小提琴（在 IE10+ 中）

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

1) 首先将您的高度设置为 100vh。

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

3) 只需用负 margin-top 抵消额外的 padding-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;
}
于 2014-01-22T09:37:55.083 回答
6

作为一种解决方法，您可以使用事实百分比垂直填充和边距是根据容器宽度计算的。这是一个非常丑陋的解决方案，我不知道你是否能够使用它，但它很好用：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;
}
于 2014-01-22T09:09:59.817 回答
5 
<div>It's working fine.....</div>

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

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

看看这个

居住

查看 jsfiddle 的实时预览

请参阅 codepen.io 的实时预览

于 2016-06-17T18:43:21.500 回答
0

使用 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>

于 2018-11-21T15:42:03.147 回答