Closed1

Tips: スクロールバーの実装（overflow）

ないつぅーないつぅー

メモtweet：

肝要

  1. 親要素は子要素を収めるheight値になる
  2. 親要素のheightが固定の場合、子要素の方が大きいと親要素を突き破る
  3. height:100%で親要素と同じheight(突き破らない)
  4. heightはcascadeされない

つまり、
1:スクロール要素が直接heightが決まっている
2:親要素がheightが決定&スクロール要素がheight100%

2で厄介なのは、前述1から親要素のheight指定なしだと固定されない。
つまり上位要素のどこかでheightが固定され、スクロール要素までheight指定が必要（前述3,4）

親要素の固定には、
px指定かvh指定することになるが、px指定はresponsiveにならないため基本はvh指定。
なので、上位オブジェクトで100vh指定して、そこから%指定 or flex-grow:1などで高さを割り振る。
スクロール要素が階層深くにいる場合はcascadeされないのでこれをスクロール対象の要素まで繰り返す。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      *, *::before, *::after {
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
      }

      .disp-area {
        display: flex;
        flex-flow: column;
        height: 100dvh;
      }
      header {
        background-color: aqua;
        border: solid 1px black;
        padding: 1rem;
        flex: 0;
      }
      main{
        background-color: aquamarine;
        padding: 1rem;
        position: relative;
        flex: 1;
      }
      footer {
        flex: 0;
      }

      .wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
      .long-message {
        overflow-y: auto;
        height: 100%;
      }

    </style>
  </head>
  <body>
    <div class="disp-area">
      <header><p>header nav</p></header>
      <main>
        <div class="wrapper">
          <p class="long-message">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></p>
        </div>
      </main>
      <footer><p>this is footer</p></footer>
    </div>
  </body>
</html>
このスクラップは2024/09/07にクローズされました