html - 响应式侧边栏上下滚动
问题描述
我需要有关我的 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>
响应式侧边栏
解决方案
你应该添加属性
overflow: hidden
到body标签
推荐阅读
- jquery - 我的菜单导航会打开 EA 选项卡,但不能在移动设备上打开
- javascript - 如何比较菜单列表中的数组值并添加具有匹配值标签的类?
- php - JSON对象压缩同时使用php发送推送通知ios/android
- python - Jupyter Labs 内核在某些单元运行时死亡
- sql - 如何在触发器中插入来自 2 个表的数据?
- python - 如何实现django框架嵌套关系?
- node.js - 如何使用 Nodejs 连接到 postgres 集群?
- jquery - 在jquery中将变量作为链接文本传递
- javascript - Webpack 供应商的 JS 包 (Vue CLI) 包含未在依赖项或 package-lock.json 中列出的代码?
- php - 未捕获的错误:在 magento 2 中调用未定义的方法 Magento\Quote\Api\Data\AddressExtension