如何从 VH 计算中获得高度的百分比？

如何解决如何从 VH 计算中获得高度的百分比？

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

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

所以如果视图高度是 900px，元素应该等于 553px -> calc((900px - 110px) / 100 * 70))

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

任何帮助将不胜感激。

解决方法

如您所知，优先级是划分。所以你必须像这样把它们放在大括号里。你必须告诉我们 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>

,

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

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

无论如何..为了使它起作用-您必须固定父容器的高度。如果主体是父级 - 您必须固定主体的高度，然后尝试执行计算。

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

,

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

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>

,

您需要：

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

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

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

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