How can I give the bottom bar a margin using dvh? The use case is the bottom bar hiding on iOS devices due to the address bar, as it is included in the vh. This hides the bottom bar on iOS. I read on the forum about using dvh as it will not include the address bar height. But how do I bind the bot…

You need to bind i like this and follow the CSS formatting convention. In your case, for the bottom margin, it would be this: [Screenshot 2024-01-03 at 10.27.51] Otherwise, it’s usually one of the others, you just need to look for which margin you need.

Got it. Can we also use calc here? I tried 0 0 calc(100dvh-env(safe-area-inset-bottom)) 0

Give dynamic margin to bottom bar

Ask us anything

Broberto (Rob) January 10, 2024, 8:59am 4

Yup, you can use calc. Anything that is legit in CSS should work in WeWeb’s bound formulas, at the condition that you do it correctly.

Topic		Replies	Views
PWA safe area using env(safe-area-inset-bottom) Ask us anything	2	376	January 19, 2026
Set modal to full height on mobile Ask us anything	3	711	June 19, 2023
Set modal height to 100dvh Ask us anything	9	793	July 9, 2024
Nav Bar Responsive Height Calculation Ask us anything	4	1284	August 31, 2023
Mobile nav bar behind browser's address bar Ask us anything	3	1300	January 10, 2024

Give dynamic margin to bottom bar

Related topics