Overview
If you have ever noticed buttons getting cut off on mobile when usingheight: 100vh, it is becausevh does not adjust when the browser UI changes. Things like the address bar and tab bar can shrink or expand the visible area, but 100vh stays the same.
The fix is to use one of the new viewport units: 100dvh or 100svh.
100dvhmatches the visible height at all times, even when the browser UI collapses as you scroll.100svhstays fixed to the smallest possible viewport height, even if the browser UI hides. This helps avoid layout jumps — especially useful in animated sections or when devices are in low-power mode.
Framer doesn't support these units out of the box, so I built a code override that adds both. Copy the code below, create a new override file in Framer, and apply it to any layer where you want100dvh or 100svh.
import { forwardRef, type ComponentType } from "react"
// -------------------------------------------------- //
// DVH OVERRIDE
// -------------------------------------------------- //
export function withDvh(Component): ComponentType {
return forwardRef((props, ref) => {
const { style, ...restProps } = props
return (
<Component
ref={ref}
{...restProps}
style={{
...style,
height: "100dvh", // CHANGE THE VALUE HERE IF NEEDED
}}
/>
)
})
}
// -------------------------------------------------- //
// SVH OVERRIDE
// -------------------------------------------------- //
export function withSvh(Component): ComponentType {
return forwardRef((props, ref) => {
const { style, ...restProps } = props
return (
<Component
ref={ref}
{...restProps}
style={{
...style,
height: "100svh", // CHANGE THE VALUE HERE IF NEEDED
}}
/>
)
})
}
Show more