如何在带有变量的 css 中计算模板的“main”元素的“min-height”值

问题描述

我正在尝试计算模板主要元素的最小高度，但到目前为止我无法让它工作。我尝试了以下方法。

:root {

    --height_header: auto;
    --height_footer: auto;

    --height_main: calc(100vh - --height_header - --height_footer);

}

header { height: var(--height_header); }    

main   { min-height: var(--height_main); }

footer { height: var(--height_footer); }

在我看来它应该可以工作，如果我用 50px 替换方法 A 中的值 auto ，那么 main 的 min-height 计算得很好。

如何从 --height_header 获取值“auto”的值？在某个时候，它会被计算出来，我应该能够得到它并用它来计算 --height_main。

解决方法

您的假设不正确，auto 不会被替换为值。它将始终保持自动（您的浏览器会完成这项工作，但不会显示在 CSS 变量中）。

因此，要么将值设置为可以在 calc() 中使用的值，要么使用另一种方法（回到过去，如果对象具有“动态”属性，我们使用 Javascript 来读取对象的“维度” ).