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

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

• javascript
• resize
• window
• height
• svelte

• I have got the answer since the innerHeight is unit less value we have to add px like this style="height: {innerHeight}px;" – Bejoy N.J Commented Jul 24, 2020 at 10:54

1 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)