問題2: ビューポート単位の落とし穴

問題

100vhを使ったフルスクリーンセクションが、モバイルブラウザでスクロールバーが表示されてしまいます。

HTML

<div class="hero-section">
  <h1>フルスクリーンヒーロー</h1>
  <p>画面いっぱいに表示されるはず</p>
</div>
<div class="next-section">
  <h2>次のセクション</h2>
</div>

CSS

.hero-section {
  height: 100vh;  /* 問題の原因 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.next-section {
  padding: 50px;
  background-color: #f5f5f5;
}

実行結果

※ モバイルブラウザでアドレスバーが表示されている時、100vhがビューポートより高くなります

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

モバイルブラウザの100vhは、アドレスバーを含めた高さになることがあります。

より安全な高さの指定方法や、CSS変数を使った解決策があります。

新しいビューポート単位も検討してみましょう。

解答

クリックして解答を表示

問題の原因

モバイルブラウザでは、100vhがアドレスバーを含む高さになるため、実際の表示領域より高くなってしまいます。

修正方法

方法1: min-heightとheightの組み合わせ

.hero-section {
  min-height: 100vh;
  min-height: -webkit-fill-available;  /* iOS Safari対応 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

方法2: 新しいビューポート単位（dvh）

.hero-section {
  height: 100vh;  /* フォールバック */
  height: 100dvh;  /* 動的ビューポート高さ */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

方法3: JavaScriptでカスタムプロパティを設定

// JavaScript
const setVH = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};

setVH();
window.addEventListener('resize', setVH);

// CSS
.hero-section {
  height: 100vh;  /* フォールバック */
  height: calc(var(--vh, 1vh) * 100);
}

新しいビューポート単位

単位 説明 使用場面
vh/vw 従来のビューポート単位 デスクトップ向け
dvh/dvw 動的ビューポート モバイル対応
svh/svw 小さいビューポート 最小表示領域
lvh/lvw 大きいビューポート 最大表示領域

覚えておくポイント

  • モバイルブラウザの100vhは予想より大きい
  • 新しいビューポート単位（dvh）が推奨
  • フォールバックを必ず用意する
  • -webkit-fill-availableでiOS対応
  • JavaScriptソリューションも検討