Question

单击一个菜单按钮时，我有一个可以滑入和滑出的菜单，但是当我点击它时，侧边栏比预期长，并引入了滚动。

可以看到here。单击菜单按钮后，您可以滚动。我希望侧边栏只与页面一样长，而不是更改页面的长度。

我的代码如下：

<!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>

我正在使用jquery 2.1.3。

谢谢， erip

Answer 1

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

<强> Demo

Answer 2

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

    }

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

下拉菜单延伸到页面底部

2 个答案: