如何使用变量在 css 中计算模板 'main' 元素的 'min-height' 值

Question

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

: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); }

我认为它应该可以工作，如果我将方法 A 中的值 auto 替换为 50px，那么 main 的最小高度计算得很好。

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

Answer 1

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

因此，要么将值设置为可以在 calc() 中使用的值，要么使用其他方法（回到我们使用 Javascript 读取对象的“维度”的那一天，如果它们具有“动态”属性。

如何使用变量在 css 中计算模板 'main' 元素的 'min-height' 值

How to calculate the 'min-height' value for the 'main' element of a template, in css with variables

css

calc