我无法在我的网站上向下滚动。不知道如何修复它？

Question

so I can't scroll down on my website, but I want to add more content, I tried everything. 所以我不能在我的网站上向下滚动，但我想添加更多内容，我尝试了一切。 Tried to increase the height in CSS but not helped.I'm a beginner in web development please help me! 试图增加CSS的高度，但没有帮助。我是网络开发的初学者，请帮助我！ Thanks! 谢谢！ Maybe the problem is somewhere in the CSS code as I think. 也许问题出现在我认为的CSS代码中。 Maybe in the body tag, but I'm not sure in this The webpage will be looking a bit weird without the full CSS code. 也许在body标签中，但我不确定这个网页看起来有点奇怪没有完整的CSS代码。 Here is the code of my website: 这是我网站的代码：

 $('.toggle').on('click', function() { $('.menu').toggleClass('active'); });

 body { font-family: 'Roboto Condensed', sans-serif; font-size: 16px; overflow: hidden; text-transform: uppercase; font-weight: bold; } .menu { height: 70px; width: 70px; left: 70px; top: 20px; text-align: center; position: absolute; background: #0e0f0f; overflow: hidden; transition: all 0.2s ease; z-index: 999; } .menu.active { width: 85%; transition: width 0.3s; -webkit-transition: width .3s; -moz-transition: width 0.3s; } .menu.active .menuContent * { opacity: 1; } .menu.active span i:nth-child(1) { transform: rotate(-45deg) translate(-50%, -50%); top: 50%; } .menu.active span i:nth-child(2) { transform: translateX(-100px); opacity: 0; } .menu.active span i:nth-child(3) { transform: rotate(45deg) translate(-50%, -50%); top: 50%; } .menu span { width: 70px; height: 70px; position: absolute; left: 0px; cursor: pointer; background: #0e0f0f; opacity: 0.3; z-index: 1; } .menu span i { position: absolute; transform-origin: 50% 50%; width: 45%; height: 2px; left: 0; right: 0; margin: auto; background-color: #ccc; transition: transform 0.3s ease, opacity 0.1s ease 0.1s; } .menu span i:nth-child(1) { top: 40%; } .menu span i:nth-child(2) { top: 50%; } .menu span i:nth-child(3) { top: 60%; } .menu .menuContent { position: absolute; width: 100%; height: 100%; line-height: 40px; right: 0px; text-align: center; } .menu .menuContent * { opacity: 0; } .menu .menuContent ul li { display: inline-block; margin-left: 150px; margin-right: 50px; color: #2d3235; transition: opacity 0.3s ease 0.3s; cursor: pointer; position: relative; } .menu .menuContent ul li:hover:before { opacity: 0.8; top: 13px; left: 20px; } .menu .menuContent ul li:hover:after { opacity: 0.8; bottom: 13px; left: -20px; } body { margin: 0; padding: 0; display: flex; background-color: #112b38; align-items: center; justify-content: center; } ul { display: inline; margin-bottom: 500px; } ul li { margin: 12px 100px; transition: 0.5s; } ul li a { display: block; position: relative; text-decoration: none; padding: 0px; font-size: 18px; font-family: sans-serif; color: #fff; text-transform: uppercase; transition: 0.5s; } ul:hover li a { transform: scale(1.5); opacity: .2; filter: blur(5px); } ul li a:hover { transform: scale(2); opacity: 1; filter: blur(0); } ul li a:before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: 0.5s; background: #43bc0b; transform-origin: right; transform: scaleX(0); z-index: -1; } ul li a:hover:before { transition: 0.5s; transform-origin: left; transform: scaleX(1); } a, a:hover, a:focus { text-decoration: none; color: white; }

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--Ez az Menu kodja--> <div class='menu'> <span class='toggle'> <i></i> <i></i> <i></i> </span> <div class='menuContent'> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact US</a></li> <li><a href="#">About us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> </ul> </div> </div> <!--Ez az Image slider kodja--> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="http://www.hdnicewallpapers.com/Walls/Big/Computers/Laptop_on_Desk_HD_Wallpaper.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://www.hdnicewallpapers.com/Walls/Big/Computers/Laptop_on_Desk_HD_Wallpaper.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="http://www.hdnicewallpapers.com/Walls/Big/Computers/Laptop_on_Desk_HD_Wallpaper.jpg" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <link rel="stylesheet" href="style2.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> </body> </html>

Answer 1

Just change: overflow: hidden; 只需改变： overflow: hidden; To overflow: auto; overflow: auto;

In body css selector 在body css选择器中

Answer 2

Remove your CSS code from a body element overflow: hidden; 从body元素overflow: hidden;删除你的CSS代码overflow: hidden;

body {

    font-family: 'Roboto Condensed', sans-serif;  
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}

Runnable solution is here . 可运行的解决方案就在这里。

我无法在我的网站上向下滚动。不知道如何修复它？

问题描述

2 个解决方案

解决方案1
0 2019-05-07 19:18:57

解决方案2
0 2019-05-07 19:27:19

我无法在我的网站上向下滚动。不知道如何修复它？

问题描述

2 个解决方案

解决方案1 0 2019-05-07 19:18:57

解决方案2 0 2019-05-07 19:27:19

解决方案1
0 2019-05-07 19:18:57

解决方案2
0 2019-05-07 19:27:19