CSS 100vhと100%のはみ出る問題の解決策を徹底解説

<div class="full-screen-section">
    この要素は画面全体の高さに合わせて表示されます。
</div>
<div>
    これはCSS 100vhを使っている要素外のコンテンツです。
</div>

.full-screen-section {
  height: 100vh;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
}

<div class="full-screen-section">
  この要素は画面全体の高さに合わせて表示されます。<br>
  スマートフォンのアドレスバーによる影響を考慮しています。
</div>
<div class="normal-section">
  これは100pxの高さの通常の要素です。<br>
  他のコンテンツと共存することができます。
</div>

.full-screen-section {
  height: -webkit-fill-available;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #333;
}

.normal-section {
  height: 100px;
  background-color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 18px;
  color: #333;
}

@media (max-width: 767px) {
  .full-screen-section {
    height: auto;
    padding-top: 80px; /* アドレスバー分のスペースを確保 */
  }
}

<header>
  ヘッダー部分
</header>
<div class="content">
  <p>ここにコンテンツが入ります。スクロールしてみてください。</p>
  <!-- 長いコンテンツを追加して、スクロールバーを表示させます -->
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
  <p>この部分は長いコンテンツです。</p>
</div>

header {
    min-height: 100vh;
    background-color: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

.content {
  padding: 20px;
  font-size: 18px;
  line-height: 1.6;
}

<header>
  Webkit-fill-availableの有効活用と問題点の解決
</header>
<div class="content">
  <p>Webkit-fill-availableは、スマートフォンのアドレスバーの影響を考慮して要素の高さを自動的に調整する便利な機能です。</p>
  <p>スマートフォンのアドレスバーによるはみ出しを回避し、要素を画面の高さに合わせて表示できるようになります。</p>
  <p>しかし、Webkit-fill-availableは一部のブラウザでしか対応していないため、他のブラウザでは正しく動作しないことがあります。</p>
  <p>そのため、代替手法を検討したり、他のブラウザでの対応策を考える必要があります。</p>
  <p>Webkit-fill-availableを使う際には、注意して互換性を確認し、ユーザーエクスペリエンスを向上させるための工夫が必要です。</p>
</div>

header {
  height: -webkit-fill-available;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.content {
  padding: 20px;
  font-size: 18px;
  line-height: 1.6;
}

/* Webkit-fill-available未対応のブラウザ向けのスタイル */
@media (max-width: 767px) {
  header {
    height: 100vh;
  }
}

<div class="container">
  <div class="box1">
    <p>height: 100vh</p>
    <p>画面全体に要素を表示</p>
  </div>
</div>

<div class="container">
  <div class="box2">
    <p>height: 100%</p>
    <p>親要素の高さに合わせて要素を表示</p>
  </div>
</div>  

.container {
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box1 {
  width: 300px;
  height: 100%;
  background-color: #ffcc99;
  border: 2px solid #333;
  text-align: center;
  padding: 20px;
}

.box2 {
  width: 100%;
  height: 100%;
  background-color: #99ccff;
  border: 2px solid #333;
  text-align: center;
  padding: 20px;
}