Svelte: <svelte:window bind:innerHeight /> is not working with style attribute in div on window resize

Question

On window resize, I have tried to add dynamic height as style property in div element, using svelte special element <svelte:window bind:innerHeight /> but I am not getting the proper result which I am looking for, Is there anything I missed.

Code:-

<script>
    var innerHeight;
</script>

<svelte:window bind:innerHeight={innerHeight} />

<div style="height: {innerHeight};">
    <h1>window height : {innerHeight}</h1>
</div>

Output:-

enter image description here

Thanks in advance

Answer 1

innerHeight is a unit less value, in order to use it as you do, you have to add the unit yourself to the style tag'

style="height: {innerHeight}px;"

(note the extra px)