Scrolling <ul> with short browser height

Tell us what’s happening:

If I make my browser’s window height fairly small, the last few elements in a scrolling ul are being cut off at the bottom of the screen. Actually you can see this problem in the example Technical Documentation project codepen (https://codepen.io/freeCodeCamp/full/NdrKKL). On my small laptop if I have my Chrome window as tall as possible I can scroll to the bottom of the navigation bar and see the last li ‘Reference’, but the shorter I make my Chrome window, the more elements get cut off at the bottom (can’t scroll far enough to see them).

The codepen has the height of the ul set to 88%. If I set it to less (say 50%), it solves the issue at smaller browser window heights, but if the browser is at max height this leaves a lot of white space under the ul. Perhaps a solution would be to calculate browser window height and adjust the ul height based on that… not sure how to do that, though. Are there any nicer solutions?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

I have a solution of your problem.it is just a trick to show the last <li> element.
the <li> element that contains the link Reference after that add one more <li> element i.e.

<nav id="navbar">
  <header>JS Documentation</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li>
      <a class="nav-link" href="#What_you_should_already_know"
        >What you should already know</a
      >
    </li>
    <li>
      <a class="nav-link" href="#JavaScript_and_Java">JavaScript and Java</a>
    </li>
    <li><a class="nav-link" href="#Hello_world">Hello world</a></li>
    <li><a class="nav-link" href="#Variables">Variables</a></li>
    <li>
      <a class="nav-link" href="#Declaring_variables">Declaring variables</a>
    </li>
    <li><a class="nav-link" href="#Variable_scope">Variable scope</a></li>
    <li><a class="nav-link" href="#Global_variables">Global variables</a></li>
    <li><a class="nav-link" href="#Constants">Constants</a></li>
    <li><a class="nav-link" href="#Data_types">Data types</a></li>
    <li>
      <a class="nav-link" href="#if...else_statement">if...else statement</a>
    </li>
    <li><a class="nav-link" href="#while_statement">while statement</a></li>
    <li>
      <a class="nav-link" href="#Function_declarations"
        >Function declarations</a
      >
    </li>
    <li><a class="nav-link" href="#Reference">Reference</a></li>
    <li><a class="nav-link"></a></li>
  </ul>
</nav>

The above code will do a trick .Use it if you like.

One option is to move the overflow control from the <ul> up to the #navbar

Thank you both!

Moving the overflow to the <ul> works perfectly! Can also make the ‘JS Documentation’ header area fixed to preserve the always visible aspect of that.

Thanks again.