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

I'm trying to calculate the min-height for the main element of my template, but so far I can't get it to work. I have tried the following approache.

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

In my opinion it should work, if I replace the value auto in approach A with 50px then the min-height for main is calculated nicely.

How do I get the value of the value 'auto' from --height_header? At some point, it will be calculated and I should be able to get it and use it to calculate --height_main.

Solution

Your assumption is incorrect, auto will not be replaced with a value. It will always remain auto (your browser will do the work but it will not show up in the CSS variable).

So either set the value(s) to something that can be used inside calc() or use another approach (back in the day we used Javascript to read the "dimensions" of objects if they had "dynamic" properties).