能否使用 CSS calc() 函数使元素的高度与其宽度相匹配？我的尝试不起作用

Question

calc() 函数没有像我在代码中预期的那样工作。

高度不是按容器宽度的 20% 计算的，而是折叠的。

html:

.box {
  width: 20%;
  height: calc(20%);
  margin: auto;
  background-color: olive;
}

<div class="box">
  
</div>

我已经尝试添加一个计算，例如 "height: calc(20% - 0px);"，但高度仍然只是坍缩为零。

谁能看看我做错了什么？谢谢！

Answer 1

尝试使用视口宽度

视口是您设备上 html 页面的可见部分。

您可以看到的页面大小为 100vw * 100vh，其中 vw 和 vh 是视口大小单位。

.box {
      width: 20vw;
      height: calc(20vw * 0.02);
      margin: auto;
      background-color: blue;
     }

Answer 2

正如我在上面评论的那样，高度百分比是相对于父元素的高度，使用 calc() 不会改变行为，因为 calc(20%) 与简单的 20% 相同。

此函数将简单地进行一些计算以提供您的属性使用的结果，因此无论是否使用 calc()，逻辑都将始终相同。

您需要为父容器设置高度，以便您的元素具有高度：

.container {
  height: 100px;
}

.box {
  width: 20%;
  height: calc(20%);
  /* same result with the below
  height: calc(20% / 1);
  height: calc(20% - 0px);
  */
  margin: auto;
  background-color: olive;
}

.box-1 {
  width: 20%;
  height: 20%;
  /* same result without calc*/
  margin: auto;
  background-color: red;
}

.box-2 {
  width: 20%;
  height: calc((50% + 20px) / 2);
  /* 50% from parent height = 50px
     50px + 20px = 70px
     70px / 2 = 35px*/
  margin: auto;
  background-color: yellow;
}

<div class="container">
  you will see this element because height is set to container
  <div class="box">
  </div>
  <div class="box-1">
  </div>
  <div class="box-2">
  </div>
</div>
you will not see these elements because no height set to parent container (the body)
<div class="box">
</div>
<div class="box-1">
</div>
<div class="box-2">
</div>

现在，如果您想在元素的 height/width 之间建立关系，您可以考虑使用变量，但它不适用于 % 值：

:root {
  --size-box:200px;
}

.box {
  width: var(--size-box);
  height: calc(0.2 * var(--size-box));
  margin: auto;
  background-color: olive;
}
.big {
   --size-box:400px;
}
.per {
   --size-box:40%;
}

<div class="box">
</div>
<div class="box big">
</div>
we don't see the below one because of the same issue, using % in height and no height specified in parent element
<div class="box per">
</div>

如果你想保持元素的纵横比，你可以检查这个问题：Maintain the aspect ratio of a div with CSS

Answer 3

就把

height:0; padding-top:100%;

填充是根据元素的宽度计算的。

能否使用 CSS calc() 函数使元素的高度与其宽度相匹配？我的尝试不起作用

Can you use CSS calc() function to make the height of an element match its width? My attempt is not working

css

height

calc