我的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 <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()"> 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">
</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>
答案 0 :(得分:0)
您应该添加属性
overflow: hidden
到正文标签
答案 1 :(得分:0)
我从您的问题中了解到的是,您希望网页上根本不存在任何滚动,然后在正文中添加overflow: hidden;
,直到您的页面完全没有内部滚动为止链接进去。 (learn more about overflow)
现在,接下来,如果您想使主体滚动但不希望侧边栏与其一起滚动,就好像它是固定的一样。然后,尝试将CSS的position: fixed;
属性设置为该元素,该元素需要固定在其位置并且不应滚动(learn more about positions)。