Detect header height and create a css var to be used to offset screen height of another element

[josh-tt]

I'm trying to do the following with alpine and tailwind:

• Detect the height of an element whose height is dynamic and add a class to another element that's set to screen height minus header height

• Detect the height of an element whose - Working

• Store the height as a css variable and class - Not working

• Add that class to another element - Working

This is what I've managed so far that gets me closest, but the css var isn't working. Tested without the var and it's ok. Any clues?

<div x-data="header" class="h-16 bg-gray-500">
 I'm a header with a dynamic height. Get my height, store it and use it as var.
 </div>

 <style :html="':root{--header-height:${header + 'px'}'"></style>

 <div x-data class="bg-red-100"
 x-init="$el.classList.add('h-screencompensated')">
 I'm a div that should be screen height minus header height.
 </div>

 <script> // get the height and store as height
       document.addEventListener('alpine:init', () => {
           Alpine.data('header',()=>({
             height: 0,
               init(){
                 Alpine.effect(()=>this.height = this.$el.offsetHeight)
               }
           }))
       })
 </script>

 <style>
   .h-screencompensated {
   height: calc(100vh - var(--header-height));
 }
 </style>

[SimoTod]

A few issues:

• Style tags don't have an html attribute, i think you wanted to use x-text there.
• You need to wrap a string in ` if you want to interpolate variables.
• while the page loads and before alpine kicks in, the css variable doesn't exist.
• while the page load and before alpine kicks in, the first style tag is empty, i don't know if the browser will figure out when it changes (this last bit needs some research, i don't know the answer)

[josh-tt]

Thanks SimoTod, I'll have a play around with those ideas. Someone on the Alpine forum helped me with some snippets and I caught what I thought was a lone ` and erased it. As for the page loading, when testing without the var just using vh it seemed to work alright, but will look into that more.