Bulma `hero is-fullheight` renders inconsistent mobile height; viewport units or content overflow suspected

Direct Answer

Measure computed heights across mobile browser UI states first. Auditing the Bulma version for CSS-variable support is useful only if you plan to patch with custom properties; it does not change the diagnostic measurement itself.

Confirmed Facts vs Likely Explanation

Confirmed Facts

• .is-fullheight applies min-height: 100vh in Bulma.
• Mobile browsers resize the visual viewport when the URL bar collapses or expands, so 100vh can exceed the visible area.
• hero-body padding and inner content can push the hero taller than the viewport once min-height is satisfied.
• A fixed navbar is removed from document flow and does not change the hero's computed height, though it can visually overlap the hero.

Likely Explanation

The mismatch is probably a combination of 100vh anchoring to the layout viewport rather than the visual viewport, plus hero-body padding that is not subtracted from the available height.

Measurement Steps

1. Open the page on a real mobile device. Desktop device emulation does not reliably reproduce URL-bar resizing.
2. Run this snippet in the browser console with the URL bar expanded, then again after scrolling to collapse it:

const hero = document.querySelector('.hero.is-fullheight');
const body = hero?.querySelector('.hero-body');
if (!hero) { console.error('Hero not found'); }

console.log('hero offsetHeight:', hero.offsetHeight);
console.log('hero computed height:', getComputedStyle(hero).height);
console.log('document scrollHeight:', document.documentElement.scrollHeight);
console.log('innerHeight:', window.innerHeight);
console.log('visualViewport height:', window.visualViewport?.height);
if (body) {
  console.log('hero-body computed height:', getComputedStyle(body).height);
  console.log('hero-body padding:', getComputedStyle(body).padding);
}

1. Compare hero.offsetHeight against window.innerHeight and visualViewport.height in both URL-bar states. A difference that appears only after collapse points to viewport-unit sizing, not content.
2. If hero height stays stable but the page still scrolls, inspect hero-body padding and content height; the overflow is coming from inside the hero.

Fixed Navbar

Measure the navbar separately so its offset is not confused with hero height:

const navbar = document.querySelector('.navbar.is-fixed-top') || document.querySelector('.navbar');
console.log('navbar offsetHeight:', navbar?.offsetHeight);
console.log('navbar bounding rect:', navbar?.getBoundingClientRect());

Because position: fixed removes the navbar from flow, subtract its height only when calculating remaining space for content. Do not subtract it from the hero's computed height. If the hero appears to start below the navbar, that offset is visual overlap, not hero height inflation.

Version Check (Conditional)

If you plan to fix this with Bulma CSS variables rather than a unit override, confirm the installed version first. Bulma 0.9+ exposes custom properties more reliably; older versions may not define --hero-height. Check package.json or run:

getComputedStyle(document.documentElement).getPropertyValue('--hero-height')

An empty string means the variable is not available in your build.

Missing Diagnostic Detail

Share your installed Bulma version only if you intend to use CSS variables for the fix. The height-isolation steps above work regardless of version.

Assumptions and Uncertainty

• Assumes Bulma 0.9 or later for CSS-variable examples; older releases may lack reliable custom properties.
• dvh support varies by browser; Safari added it in version 15.4, so a fallback to 100vh may still be needed.
• Actual mobile testing is required; desktop dev tools do not fully replicate URL-bar behavior.