ウィンドウや他の要素の高さに合わせて、スクロールコンテナの高さを調整

以下画像の、緑の高さをコントロールしたい。
f:id:ryotah:20170616185745p:plain

一番左のFlexboxを利用する方法が簡単でよさそう。

  • 並びをカラムに変更
  • height: 100%flex-grow: 1 をうまく利用

f:id:ryotah:20170616185803p:plainf:id:ryotah:20170616185810p:plain


(以下のコードはjsfiddleとほぼ同じ。)

<!doctype html>
<html class="no-js" lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="d-flex h-100">
      <!-- 1 -->
      <section class="card w-25 h-100">
        <div class="card-block h-100">
          <div class="d-flex flex-column h-100">
            <h1>
              Header
            </h1>
            <div style="flex: 1;" class="d-flex flex-column">
              <div>
                description, description...
              </div>
              <div style="
                flex: 1;
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>display: flex;</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 2 -->
      <section class="card w-25">
        <div class="card-block h-100">
          <div class="h-100">
            <h1>
              Header
            </h1>
            <div style="height: calc(100% - 52px);">
              <div>
                description, description...
              </div>
              <div style="
                height: calc(100% - 24px);
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>height: calc(100% -...</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 3 -->
      <section class="card w-25">
        <div class="card-block h-100">
          <div class="h-100">
            <h1>
              Header
            </h1>
            <div style="height: calc(100% - 52px); position: relative;">
              <div class="w-100" style="position: absolute; background-color: #fff;">
                description, description...
              </div>
              <div style="
                height: 100%;
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                padding-top: 24px;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>height: calc(100% -...</code>
                    <code>position: absolute;</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 4 -->
      <section class="card w-25">
        <div class="card-block h-100">
          <div class="h-100">
            <h1>
              Header
            </h1>
            <div>
              <div>
                description, description...
              </div>
              <div id="scroll" style="
                background-color: rgba(255,0,0,.1);
                overflow: scroll;
                ">
                <div class="d-flex flex-column" style="height: 600px;">
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Top<br>
                    <code>elm.offsetTop</code>
                  </div>
                  <div class="mb-auto" style="background-color: rgba(255,0,0,.1);">
                    Middle
                  </div>
                  <div style="background-color: rgba(255,0,0,.1);">
                    Bottom
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <script src="/app.js"></script>
    <script>
      function setHeight() {
        var elm = document.getElementById('scroll');
        console.log(elm.offsetParent);
        console.log(elm.offsetTop);
        elm.style.height = 'calc(100vh - 1.25rem - ' + elm.offsetTop + 'px)';
      }
      setHeight();
      window.onresize = function () {
        setHeight();
      };
    </script>
  </body>
</html>