Make div scrollable if the content exceeds the height of the viewport

Question

Hi I have a div like this :

<div id="toc">
  <div>
    <h1 id="rs-doc-sql-compliance" class="header-toc">
      <a href="#rs-doc-sql-compliance"><span>SQL compliance</span></a>
      <ul>
        <li>
          <h2 id="rs-doc-select-statements" class="header-toc">
            <a href="#rs-doc-select-statements"
              ><span>SELECT Statements</span></a
            >
            <ul>
              <li>
                <h3 id="rs-doc-select-syntax" class="header-toc">
                  <a href="#rs-doc-select-syntax"><span>SELECT Syntax</span></a>
                </h3>
              </li>
            </ul>
            <ul>
              <li>
                <h3 id="rs-doc-examples" class="header-toc">
                  <a href="#rs-doc-examples"><span>Examples</span></a>
                </h3>
              </li>
            </ul>
            <ul>
              <li>
                <h3 id="rs-doc-aggregate-functions" class="header-toc">
                  <a href="#rs-doc-aggregate-functions"
                    ><span>Aggregate Functions</span></a
                  >
                  <ul>
                    <li>
                      <h4 id="rs-doc-count" class="header-toc">
                        <a href="#rs-doc-count"><span>COUNT</span></a>
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-count_distinct" class="header-toc">
                        <a href="#rs-doc-count_distinct"
                          ><span>COUNT_DISTINCT</span></a
                        >
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-avg" class="header-toc">
                        <a href="#rs-doc-avg"><span>AVG</span></a>
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-sum" class="header-toc">
                        <a href="#rs-doc-sum"><span>SUM</span></a>
                      </h4>
                    </li>
                  </ul>
                </h3>
              </li>
            </ul>
            <ul>
              <li>
                <h3 id="rs-doc-join-queries" class="header-toc">
                  <a href="#rs-doc-join-queries"><span>JOIN Queries</span></a>
                  <ul>
                    <li>
                      <h4 id="rs-doc-inner-join" class="header-toc">
                        <a href="#rs-doc-inner-join"><span>Inner Join</span></a>
                      </h4>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <h4 id="rs-doc-left-join" class="header-toc">
                        <a href="#rs-doc-left-join"><span>Left Join</span></a>
                      </h4>
                    </li>
                  </ul>
                </h3>
              </li>
            </ul>
          </h2>
        </li>
      </ul>
    </h1>
  </div>
</div>

And here the CSS I'm using :

#tocOut{
  position:sticky;
  padding-top:8px;
  margin-top: 8px;
  padding-left: 8px;
  top:8px;
}

I want to make this div scrollable if the content exceeds the pages viewport here's an example :

In this Screenshot the content is way more than the page's height but I can't make it scrollable, I've tried overflow-y: scroll; but didn't work out for me, and the scrollbar show even if the content is less than the viewport of the page.

Thanks For helping

Answer 1

You are able to make a div scrollable with

overflow: auto|scroll|hidden; 

When the container element has a specific height. If there is no height given like in your example it will not work.

In the comments you said you tried with max-height: 100% because I have suggested you to do so, but why is % not working? Because % refers to a relative container where a height is given or not, based on that it works or not. (correct me if I am wrong)

Solution

So the solution is (in your case) to use vh.

#toc{
 overflow: auto;
 max-height: 100vh;
}

"vh" works because it refers to the current view height of the display. Of course you are also able to use px.