title: Sidebar not scrolling full content
body: <p>I have a layout in which i have header, sidebar  and main section.</p>
  <p>I have a fixed sidebar. Inside that  have 35 section. Scroll bar is not covering all content. My scroll bar is visible till 32 section.</p>
  <p>I have tried a lot but unable to do. i think problem is with <code>.sidenav</code> property <code>top</code></p>
  <p>Here is my code
  <a href="https://codepen.io/dhairya-lakhera/pen/VwaRQeV" rel="nofollow noreferrer">PenCode</a> Link</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;title&gt;jQuery UI Accordion - Collapse content&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;/resources/demos/style.css&quot;&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
    &lt;style&gt;
      html {
        height: 100%;
      }
  
      body {
        height: 100%;
      }
  
      .sidenav {
        height: 100%;
        width: 300px;
        position: fixed;
        z-index: 1;
        top: 50;
        left: 0;
        background-color: white;
        overflow-x: hidden;
        overflow-y: auto;
      }
  
      .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 32px;
        color: #818181;
        display: block;
      }
  
      .sidenav a:hover {
        color: #f1f1f1;
      }
  
      .main {
        margin-left: 300px;
        /* Same as the width of the sidenav */
        font-size: 28px;
        /* Increased text to enable scrolling */
        padding: 0px 10px;
      }
    &lt;/style&gt;
    &lt;script&gt;
      $(function () {
        $(&quot;#accordion&quot;).accordion({
          collapsible: true,
          heightStyle: &quot;content&quot;,
          active: false
        });
  
        $( &quot;h3&quot; ).click(function() {
            $('.sidenav').scrollTop(document.getElementById(this.id).offsetTop);
          });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class=&quot;header&quot; style=&quot;min-height:100px; border: 1px solid black;&quot;&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class=&quot;sidenav&quot;&gt;
      &lt;div id=&quot;accordion&quot;&gt;
        &lt;h3 id=&quot;w1&quot;&gt;Section 1&lt;/h3&gt;
        &lt;div&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w2&quot;&gt;Section 2&lt;/h3&gt;
        &lt;div&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w3&quot;&gt;Section 3&lt;/h3&gt;
        &lt;div&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w4&quot;&gt;Section 4&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w5&quot;&gt;Section 5&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w6&quot;&gt;Section 6&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w7&quot;&gt;Section 7&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w8&quot;&gt;Section 8&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w9&quot;&gt;Section 9&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w10&quot;&gt;Section 10&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w11&quot;&gt;Section 11&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w12&quot;&gt;Section 12&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w13&quot;&gt;Section 13&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w14&quot;&gt;Section 14&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w15&quot;&gt;Section 15&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w16&quot;&gt;Section 16&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w17&quot;&gt;Section 17&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w18&quot;&gt;Section 18&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w19&quot;&gt;Section 19&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w20&quot;&gt;Section 20&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w21&quot;&gt;Section 21&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w22&quot;&gt;Section 22&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w23&quot;&gt;Section 23&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w24&quot;&gt;Section 24&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w32&quot;&gt;Section 32&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w26&quot;&gt;Section 26&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w27&quot;&gt;Section 27&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w28&quot;&gt;Section 28&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w29&quot;&gt;Section 29&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w30&quot;&gt;Section 30&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w31&quot;&gt;Section 31&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w32&quot;&gt;Section 32&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w33&quot;&gt;Section 33&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w34&quot;&gt;Section 34&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;h3 id=&quot;w35&quot;&gt;Section 35&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;main&quot;&gt;
      &lt;h2 style=&quot;text-align: center;&quot;&gt;Main Section&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>