代码之家 › 专栏 › 技术社区 › erip Jigar Trivedi

下拉菜单延伸到页面底部

css html jquery

erip Jigar Trivedi · 技术社区 · 11 年前

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

可以看出 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。

2 回复 | 直到 4 年前

isherwood 11 年前

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

Demo

Michael Dziedzic 11 年前

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

    }

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