So this is one of my first questions on StackOverflow. I have been stuck with trying to bind a variable to the window's inner height.

Context: I have a website comprised of 3 main elements in this order:

1. Header
2. Content
3. Navbar (fixed)

What I want is to find the height of the space between the header and the navbar. For this I am trying to bind a variable to the window's inner height, and then subtract the header and navbar heights which are known.

What I find strange is that none of the other bindings on svelte:window seem to work either.

Here is a sample of my code:

<script>
import { navHeight, headerHeight, contentHeight } from "$lib/stores/dimensions.js"

let innerHeight = 0;
// write the computed height in the store
$: $contentHeight = innerHeight - $navHeight - $headerHeight;

</script>

<!-- Get the window's inner height and bind the innerHeight variable to it -->
<svelte:window bind:innerHeight />
<p>{innerHeight}</p>

CodePudding user response：

So I have found the solution to my problem: I was trying to place this code in __layout.svelte. Once I placed this code in the index page everything worked as intended!

Apparently layouts are not capable of accessing the window properties (understandable though, since it's supposed to be used as a template).