如何从 VH calc 中获得高度的百分比？答案

【问题标题】：How to get a percentage of a height from a VH calc?如何从 VH calc 中获得高度的百分比？
【发布时间】：2021-10-03 13:12:21
【问题描述】：

我正在尝试将元素高度设置为计算结果的 70%，计算结果为 100vh 减去标题高度。

元素高度：calc((100vh - 110px(固定标题高度) - 30%)

因此，如果视图高度为 900px，则元素应等于 553px -> calc((900px - 110px) / 100 * 70))

但是我的计算似乎不起作用。

任何帮助将不胜感激。

【问题讨论】：

试试这样：我认为如果你使用 porcentage 是更好的 calc(100% - 110px - 30%)

标签： css calc

【解决方案1】：

这是你想要达到的目标吗？

body {
  height: 100vh;
  background-color: #eee;
}

header {
  height: 110px;
  background-color: #333;
}

main {
  height: calc((100vh - 110px) * .7);
  background-color: #666;
}

<header></header>
<main></main>

【讨论】：

【解决方案2】：

你需要：

height: calc((100vh - "fixed height) *.7);

header {
  height: 100px;
  background: #000;
}

main {
  height: calc((100vh - 100px) *.7);
  background: red;
}

<header></header>
<main></main>

【讨论】：

【解决方案3】：

如您所知，优先级是除法。所以你必须像这样把它们放在大括号里。您必须告诉我们 30 的单位是什么，因为它不会减去无单位数。 px vh ...

/*element height: calc((100vh - 110px(fixed header height) - 30%)*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box
}

header {
  width: 100vw;
  height: 110px;
  background-color: orange
}

section {
  width: 100vw;
  height: calc((100vh - 110px) - 30vh);
  background-color: blue
}

<header></header>
<section><section>

【讨论】：

【解决方案4】：

为什么不使用 calc(70vh - 110px) ？

如果你想要 100vh-110px - 直接父级高度的 30% .... amm 最好切换到 JavaScript。 % 来自父维度。如果无法确定维度，则计算失败。

无论如何.. 为了让它工作 - 你必须修复父容器的高度。如果 body 是 parent - 你必须固定 body 的高度，然后尝试执行计算。

计算可以与主体的宽度一起使用，例如 calc(100vw - 110px - 24%) ，但这是因为宽度通常是固定/受限的。

【讨论】：