移动端100vh高度不足问题求助：桌面端网站适配移动端遇高度设置难题

Hey there, let's work through this mobile height problem you're hitting. I've dealt with similar frustrating quirks before, so here are targeted checks and fixes to get your content filling the full screen:

• Fix your viewport meta tag first
  A missing or misconfigured viewport tag is the #1 culprit for wonky mobile sizing. Make sure this is in your <head> section:

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

  The viewport-fit=cover line is critical for iOS devices with notches or dynamic toolbars—it forces your content to stretch to the actual full screen height.

• Reset default browser styles
  Browsers add hidden margins/paddings to html and body that can throw off height calculations. Add this CSS to wipe those defaults:

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
    overflow-x: hidden;
  }
  

  Using min-height: 100vh instead of just height: 100% ensures the body expands if your content is longer than the viewport, while still filling the screen when content is short.

• Ensure your main container inherits full height
  If you're using a wrapper around your content, make sure it's set to stretch with the body:

  .your-main-container {
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  

  Flexbox will help child elements inside the container also stretch to fill available space.

• Check for accidental overflow clipping
  Double-check if any parent elements have overflow: hidden set unnecessarily—this can clip your content even if height is configured correctly. Remove any overflow rules you don't explicitly need.

• Account for dynamic mobile toolbars
  Mobile browsers like Chrome and Safari have toolbars that shrink when scrolling, which breaks static vh units. Use this JS trick to get a reliable full-screen height:

  function setDynamicViewportHeight() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  }
  window.addEventListener('resize', setDynamicViewportHeight);
  window.addEventListener('load', setDynamicViewportHeight);
  

  Then use the custom variable in your CSS:

  html, body {
    min-height: calc(var(--vh, 1vh) * 100);
  }
  

If none of these fix it, fire up Chrome DevTools' mobile emulator and inspect the box model for html, body, and your main container. Look for unexpected padding, margins, or positioned elements that might be constraining the height.

内容的提问来源于stack exchange，提问作者user9592364