'Dropdown menu extends past bottom of page

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.

It can be seen here. 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.

My code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Testing My HTML and CSS</title>
    <style>

        * {
            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;
        }

    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div class="header">
        <h1>Hello, World!</h1>
        <div id="menu-btn"></div>
    </div>
    <div class="sidebar">
        <li><a href="#">Hello</a></li>
        <li><a href="#">This</a></li>
        <li><a href="#">Is</a></li>
        <li><a href="#">Just</a></li>
        <li><a href="#">A</a></li>
        <li><a href="#">Test</a></li>
    </div>
    <div class="content">
        <p>Hello, World</p>
    </div>
    <div class="footer">
        <p>Hello</p>
    </div>

    <script>
        $(function() {
            $('body').addClass('loaded');
        });

        $("#menu-btn").on("click", function(){
            $(".sidebar").slideToggle(600);
        });
    </script>
</body>
</html>

I'm using jquery 2.1.3.

jqueryhtmlcss


Solution 1:[1]

.sidebar {
    ...
    /* height: 100%; */
    top: 100px;
    bottom: 0;
}

Demo

Solution 2:[2]

    .sidebar {
        background-color: #ebebeb;
        position: absolute;
        width: 200px;
        //height: 100%;
        top: 100px;
        bottom: 0;
        padding-top: 10px;

    }

https://jsfiddle.net/lemoncurry/6g7e5pf8/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood
Solution 2 Michael Dziedzic

Related Questions