Solution 1 :

you should add the property

overflow: hidden

to the body tag

Solution 2 :

What I understood from your question is that you want that there must be no scrolling at all in the web page, then add overflow: hidden;to the body and the your page will never scroll at all until there is no internal link in it. (learn more about overflow)

Now, the next thing, if you want the body to scroll but don’t wants the sidebar to scroll along with it as if it is fixed. Then, try the position: fixed; property of CSS to the element which needs to be fixed at its place and should not be scrolling (learn more about positions).

Problem :

I need help with my css code. I don’t want my web site to scroll up and down, I want to make it full screen and responsive. I tried css height:100vh, height: 100% and height:1920px but it was still scrolling up and down. This problem is treated in a lot of place, but I could not find a solution that fit my need.

enter image description here
enter image description here

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

responsive sidebar

Comments

Comment posted by validator.w3.org/nu/#textarea

First, you can try to remove the html errors with this :

By

Leave a Reply

Your email address will not be published. Required fields are marked *