响应式侧边栏上下滚动

Question

我的 css 代码需要帮助。我不想让我的网站上下滚动，我想让它全屏显示并响应。我尝试了 css height:100vh、height: 100% 和 height:1920px，但它仍在上下滚动。这个问题在很多地方都有处理，但我找不到适合我需要的解决方案。

* {
    margin: 0px;
    padding: 0px;
    font-family:sans-serif ;

}
body{
    height: 100%;
    width: 100%;
}
#sidebar{
    margin: 90px 0px;
    position: absolute;
    width: 300px;
    height: 100%;
    background:#22356C ;
    left: -240px;
    transition: all 500ms linear;
}
#sidebar.active{
    left:0px;
}
#sidebar ul li {
   color:white;
   list-style: none;
    text-align: center;
    padding: 15px 10px;

}
#sidebar .toggle-btn{
    position: absolute;
    left: 310px;
    top: 5px;
}
#sidebar .toggle-btn span{
    display: block;
    width: 30px;
    height: 5px;
    background:#22356C ;
    margin: 5px 0px ;
}
#menu{
    position: absolute;
     margin: 40px 220px;
    height: 128px;
    width: 100%;

}
#menu1{
position: absolute;
    margin:0px 100px;
    color:white;
    list-style: block;
}
#bolock{
    height: 100%;
    width: 100%;
}
#page{
    position: absolute;
    margin: 90px 50px;


}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
    <link rel="stylesheet" href="css/mycss.css" integrity="" crossorigin="anonymous">

    <meta charset="UTF-8">
    <title>Title</title>
    <div id="sidebar">
        <ul>
            <li></li>
            <li></li>
            <li>
                Admin  <img src="icones/admin.png" height="35" width="35" align="right">
            </li>
            <li>Frigo&nbsp;<img src="icones/frigo.png"height="35" width="35"align="right"></li>
            <li><img src="icones/arow%20(1).png" height="10" width="10" onclick="myFunction()">&nbsp; Paramétrage<img src="icones/Composant%209%20–%201.png"height="35" width="35"align="right"> <ul id="Paramétrage">
                <div id="menu1"style="display:none;">
                    <li><a href="index.html" target="bolock">Alerts</a></li>
                    <li>Produit</li>
                    <li>contrainte espace</li>
                    <li>compte</li>
                </div>
            </ul>
            </li>
        </ul>

    </div>
    <nav class="navbar navbar-light bg-light">
        <img src="icones/logo%20bws.png" class="d-inline-block align-top" alt="">
        </a>
        <div id="menu">
            <img src="icones/balise.png"onclick="togglesidebar()">
        </div>
        <div class="row" id="logs">
            <p>
                <img src="icones/Groupe%20102.png"height="40" width="40">&nbsp;&nbsp;
            </p><p>
            <img src="icones/Groupe%20104.png"height="40" width="40">
        </p>
        </div>
    </nav>
</head>
<body>

    <div class="page">
        <iframe name="bolock" frameborder="0" id="bolock"></iframe>
    </div>
<script>
    function togglesidebar() {
        document.getElementById("sidebar").classList.toggle('active');
    }
</script>
    <script>
    function myFunction() {
    var x = document.getElementById("menu1");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }
    </script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>

</body>
</html>

响应式边栏

Answer 1

你应该添加属性

overflow: hidden

到正文标签

Answer 2

我从你的问题中了解到，你希望网页中绝对不能滚动，然后将 overflow: hidden; 添加到正文中，你的页面将永远不会滚动，直到有其中没有内部 link。 (learn more about overflow)

现在，接下来，如果您希望正文滚动但不希望侧边栏像固定一样随之滚动。然后，尝试 CSS 的 position: fixed; 属性到需要固定在其位置且不应滚动的元素 (learn more about positions)。

响应式侧边栏上下滚动

responsive sidebar scroll up and down

html

css

image

sidebar

bootstrap-4

响应式边栏