title: Dropdown menu extends past bottom of page
body: <p>I have a menu that slides in-and-out when a menu button is clicked, but when I click it, the sidebar is longer than expected and introduces a scroll.</p>
  <p>It can be seen <a href="http://jsfiddle.net/774oou18/" rel="nofollow noreferrer">here</a>. When the menu button is clicked, you can scroll. I want the sidebar to only be as long as the page, not change the length of the page.</p>
  <p>My code is as follows:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Testing My HTML and CSS&lt;/title&gt;
      &lt;style&gt;
  
          * {
              padding: 0;
              margin: 0;
          }
  
          body .sidebar {
              display:block;
          }
  
          body.loaded .sidebar {
              display:none;
          }
  
          .header {
              background-color: black;
              height: 100px;
              width: 100%;
              text-align: center;
              line-height: 2;
              color: white;
          }
          
          .sidebar {
              background-color: #ebebeb;
              position: absolute;
              width: 200px;
              height: 100%;
              padding-top: 10px;
  
          }
  
          .sidebar li {
              color: black;
              list-style-type: none;
          }
  
          .sidebar li a {
              text-decoration: none;
              margin-left: 30px;
              margin-top: 30px;
              padding-top: 10px;
          }
  
          .content {
              padding:10px;
              padding-bottom:30px;  
              padding-top: 50px; 
              padding-left: 250px;
          }
  
          #menu-btn {
              background-image: url(http://i.imgur.com/cT9D02u.png?1);
              float: left;
              height: 48px;
              width: 44px;
              margin-left: 50px;
              margin-top: -35px;
          }
  
          .footer {
              width:100%;
              height:30px;
              position:absolute;
              text-align: center;
              bottom:0;
              left:0;
          }
  
      &lt;/style&gt;
      &lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;header&quot;&gt;
          &lt;h1&gt;Hello, World!&lt;/h1&gt;
          &lt;div id=&quot;menu-btn&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;sidebar&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Hello&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;This&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Is&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Just&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;A&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
      &lt;div class=&quot;content&quot;&gt;
          &lt;p&gt;Hello, World&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;footer&quot;&gt;
          &lt;p&gt;Hello&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          $(function() {
              $('body').addClass('loaded');
          });
  
          $(&quot;#menu-btn&quot;).on(&quot;click&quot;, function(){
              $(&quot;.sidebar&quot;).slideToggle(600);
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I'm using jquery 2.1.3.</p>