# Fit element to windows width

**URL:** <https://community.weweb.io/t/fit-element-to-windows-width/4906>\
**Category:** How do I?\
**Created:** [October 14, 2023, 3:56pm UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906 "2023-10-14T15:56:07Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![JacquesL](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JacquesL](https://community.weweb.io/u/JacquesL)\
**Post date:** [October 14, 2023, 3:56pm UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/1 "2023-10-14T15:56:07Z")

</div>

Hello,

I would like to fit an element’s height (mapbox) to the height of my window and not the height of my page. I’ve tried to use Windows.InnerWidth but it doesnt seem to work. Anyone can help ?

Jacques

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 14, 2023, 4:15pm UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/2 "2023-10-14T16:15:25Z")

</div>

Set the width to 100vw or 100% (you can select the unit)

---

<div class="post-metadata">

**Author:** ![JacquesL](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JacquesL](https://community.weweb.io/u/JacquesL)\
**Post date:** [October 14, 2023, 4:17pm UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/3 "2023-10-14T16:17:30Z")

</div>

% doesnt work and i do not have vw ☹

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 14, 2023, 5:30pm UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/4 "2023-10-14T17:30:20Z")

</div>

You can bind a string as a value and write “100vw”  
Could you send us your setup?

---

<div class="post-metadata">

**Author:** ![JacquesL](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JacquesL](https://community.weweb.io/u/JacquesL)\
**Post date:** [October 15, 2023, 9:03am UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/5 "2023-10-15T09:03:47Z")

</div>

Oh i didnt know that !

I’ve found a solution with JS, using window.height, I don’t know if it’s better than the solution u just sent ?

---

<div class="post-metadata">

**Author:** ![raydeck](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raydeck/32/384_2.png) [@raydeck](https://community.weweb.io/u/raydeck)\
**Post date:** [October 15, 2023, 10:34am UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/6 "2023-10-15T10:34:27Z")

</div>

Setting to `window.height` is a good shim! Just pay attention to whether your window resizes later and how that affects the map display. If you find it’s acceptable, you’re done! And if you find that there are corner cases, you might wind up adding a window resize listener.

---

<div class="post-metadata">

**Author:** ![JacquesL](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JacquesL](https://community.weweb.io/u/JacquesL)\
**Post date:** [October 15, 2023, 10:50am UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/7 "2023-10-15T10:50:45Z")

</div>

Thanks for the explanations!!

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 16, 2023, 8:06am UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/8 "2023-10-16T08:06:00Z")

</div>

Also please use wwLib.getFrontWindow() instead of just window (so it work correctly on the editor)  
Please be aware that this will not be reactive (the value will not change if the window is resize)

Using 100vh seems better, you can even try the new unit dvh, which will handle also the height with or without the adress bar on mobile

---

<div class="post-metadata">

**Author:** ![JacquesL](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JacquesL](https://community.weweb.io/u/JacquesL)\
**Post date:** [October 16, 2023, 8:21am UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/9 "2023-10-16T08:21:57Z")

</div>

Oh thanks, i’m going to use 100vh then ! Should i just set the input to “100vh” then ?

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 16, 2023, 8:34am UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/10 "2023-10-16T08:34:17Z")

</div>

Yes exactly 🙂 or “100dvh” depending on which browser you need to support

---

<div class="post-metadata">

**Author:** ![JacquesL](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JacquesL](https://community.weweb.io/u/JacquesL)\
**Post date:** [October 16, 2023, 8:39am UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/11 "2023-10-16T08:39:10Z")

</div>

Does dvh works with more browsers ?

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 16, 2023, 12:14pm UTC](https://community.weweb.io/t/fit-element-to-windows-width/4906/12 "2023-10-16T12:14:37Z")

</div>

You cand find the list of supported browser [here](https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic)
