Fix HTML Height 100% in Savannah Browser Android

To fix html height 100 and html body height 100 issues in Savannah Browser on Android, switch from height: 100% to height: 100dvh—it dynamically adjusts to the actual visible viewport, dodging the browser UI overlap that leaves blank space below your content. Pair it with a quick JavaScript snippet setting a --vh CSS variable from window.innerHeight for older browser support, and delay your opacity transition until the height locks in. This combo works where plain 100vh or 100% fails, filling the full window height every time without restarts or reload glitches.

Contents

• Why html height 100 Fails in Savannah Browser
• Fix 1: height: 100dvh for Full Viewport Coverage
• Fix 2: JavaScript --vh Variable Fallback
• Handling Opacity Transitions and Initial Blank Pages
• Testing and Cross-Browser Fallbacks
• Sources
• Conclusion

Why html height 100 Fails in Savannah Browser

You’ve nailed the basics with html, body { height: 100%; }, but Savannah Browser on Android throws a curveball. Unlike Chrome, where it snaps to full height nicely, Savannah—being a Chromium-based privacy browser—treats the viewport differently. The 100% or even 100vh gets calculated against the initial viewport size, ignoring the browser’s address bar, navigation UI, or resize quirks that shrink the visible area.

Picture this: on mobile, the UI bars hide or show dynamically. Your content paints at 100vh, but then the real visible height drops, leaving that pesky blank space below. Restart the browser? It grabs an even smaller initial viewport, blanking out the page until scroll. And your opacity fade-in from 0 to 1? It triggers too early, before the layout settles, making short pages look stubby.

Sources like the DEV Community nail it: 100vh works on desktop but slips under mobile browser chrome. Savannah inherits this from Chromium, but its privacy tweaks might amplify the timing issues.

Fix 1: height: 100dvh for Full Viewport Coverage

Enter 100dvh—dynamic viewport height. It’s the modern CSS hero for html height 100 on Android mobiles. Unlike static vh, dvh constantly recalculates based on the current visible area, no blank gaps.

Update your CSS like this:

html, body {
 margin: 0;
 padding: 0;
 height: 100dvh; /* Dynamic magic */
 overflow: hidden; /* Prevent scroll bleed */
}

#your-main-content {
 height: 100%;
 /* Your opacity: 0; transition here */
}

Boom. Your page stretches to the full window height in Savannah Browser, even on resize or UI toggle. A Medium guide on viewport units calls this a one-liner win, and tests confirm broad Chromium support since 2023.

But what about older browsers? dvh is solid in Chrome 108+ and equivalents, but layer in a fallback.

Fix 2: JavaScript --vh Variable Fallback

For bulletproof html body height 100, add this JS polyfill. It sets a --vh custom property to 1% of window.innerHeight, updating on resize. Slap it in a <script> before your content fades in.

function setVH() {
 let vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', setVH);
setVH(); // Run on load

Then tweak CSS:

html, body {
 height: 100dvh; /* Modern browsers */
 height: calc(var(--vh, 1vh) * 100); /* Fallback */
 margin: 0;
 padding: 0;
}

This mirrors window.innerHeight exactly, crushing viewport bugs. The same Medium post shares this exact snippet—it’s battle-tested. In Savannah Browser, call setVH() immediately on DOMContentLoaded to beat the initial paint.

Handling Opacity Transitions and Initial Blank Pages

Your setup—opacity 0 to 1 post-load—exposes the timing flaw. Content renders at wrong height, fades in cropped, then scrolls fix it. Solution? Gate the transition behind height calculation.

Wrap it:

document.addEventListener('DOMContentLoaded', () => {
 setVH(); // Lock height first
 document.querySelector('#your-main-content').style.opacity = '1';
});

Or CSS-only with a delay:

#your-main-content {
 opacity: 0;
 transition: opacity 0.3s ease;
 animation: fadeIn 0.5s forwards 0.1s; /* Tiny delay for layout */
}

@keyframes fadeIn {
 to { opacity: 1; }
}

No more blank restarts in Savannah Browser. Taller pages work post-scroll because resize fires setVH(). Short ones? Now they fill perfectly. A detailed viewport units explainer recommends this progressive pattern: 100vh fallback, then 100dvh.

Testing and Cross-Browser Fallbacks

Test on real Android with Savannah Browser—emulators miss UI dynamics. Steps:

1. Apply 100dvh + JS --vh.
2. Hard refresh, restart app. Check initial load.
3. Toggle address bar (scroll up/down). Measure height.
4. Compare Chrome side-by-side.

Fallback stack for max reach:

• height: 100%; (ancient)
• height: 100vh;
• height: calc(var(--vh, 1vh) * 100);
• height: 100dvh; (priority)

CSS-Tricks backs this hierarchy. For iframes or divs (html iframe height 100, html div height 100), inherit from body.

Sources

1. Understanding why 100vh behaves differently on mobile - DEV Community
2. Fix mobile viewport 100vh bug in one line of CSS: Dynamic viewport units in action
3. Understanding Mobile Viewport Units: A Complete Guide to svh, lvh, and dvh
4. The Trick to Viewport Units on Mobile - CSS-Tricks
5. Improving Mobile Design: The Latest CSS Viewport Units - LogRocket

Conclusion

Switch to height: 100dvh with the --vh JS backup, and html height 100 in Savannah Browser becomes rock-solid—no more blank spaces, restarts, or Chrome envy. Time your opacity right, test on device, and you’re set for full viewport glory across Android browsers. Short pages fill out, tall ones scroll smooth. Grab that code, deploy, and watch the complaints vanish.