可滚动内容溢出

时间：2020-08-01 15:57:49

标签： html css overflow

我希望div“可滚动”保持在div“动画菜单”中，但我尝试了几种方法，但均未获得结果。

这是我的index.html文件

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet">      
    </head>

    <body>
        <div id="animation-menu">
            <nav class="navbar navbar-dark bg-dark justify-content-center">
                <span class="navbar-brand">Animationen</span>
            </nav>
            <div id="scrollable">
                <div class="search-bar ml-3 mr-3 mb-3">
                    <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1">Animation suchen</label>
                    </div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>                                                                                                                          
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
        <script>
            Scrollbar.init(document.querySelector('#scrollable'));
        </script>
    </body>
</html>

这是我的style.css文件

#animation-menu {
    left: 0;
    top: 0;
    margin: 2rem;
    width: 25rem;
    height: 30rem;
    background-color: rgba(33, 33, 33, 0.8);
    position:fixed;
    overflow:hidden;
}

#animation-menu > nav {
    text-align: center;
}

.animation {
    color: white;
}

.d-flex {
    opacity: 0.8;
}

#scrollable {
    overflow-y: auto;
}

也许您可以看到我也使用了自己的滚动条。但这应该在div“动画菜单”中。导航栏应固定在顶部，并且只有div“ scrollable”应滚动。

2 个答案:

答案 0 :(得分：1)

要将导航栏固定在顶部，应在导航栏中添加position:fixed属性。

#animation-menu {
    margin: 2rem;
    width: 25rem;
    height: 30rem;
    background-color: rgba(33, 33, 33, 0.8);
    overflow:auto;
}

#animation-menu > nav {
    text-align: center;
    width: 25rem;
    background-color: rgba(33, 33, 33, 0.8);
    position:fixed;
    overflow:auto;
     z-index:99;
}

.animation {
    color: white;
}

.d-flex {
    opacity: 0.8;
}

#scrollable {
    overflow:hidden;
    margin-top:3rem;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet">      
    </head>

    <body>
        <div id="animation-menu">
            <nav class="navbar navbar-dark bg-dark justify-content-center">
                <span class="navbar-brand">Animationen</span>
            </nav>
            <div id="scrollable">
                <div class="search-bar ml-3 mr-3 mb-3">
                    <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1">Animation suchen</label>
                    </div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>                                                                                                                          
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
        <script>
            Scrollbar.init(document.querySelector('#scrollable'));
        </script>
    </body>
</html>
查看整页代码。
让我知道您是否还有其他想法。

答案 1 :(得分：0)

如果您只是为#scrollable分配了高度，我认为它将解决您的问题 

#scrollable {
    overflow-y: auto;
}

至 

#scrollable {
      height: 500px;
}

see the edited code

相关问题
最新问题