我正在制作移动设备的网页，页面应滚动，但不再滚动。下面是应该有问题的所有相关代码。感谢您的帮助。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Level Push Menu - Demo 3</title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" href="responsiveslides.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script>
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
speed: 800
});
});
</script>
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Push Wrapper -->
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<h2 class="icon icon-world">All Categories</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-display" href="#">Devices</a>
<div class="mp-level">
<h2 class="icon icon-display">Devices</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-phone" href="#">Mobile Phones</a>
<div class="mp-level">
<h2>Mobile Phones</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li><a href="#">Super Smart Phone</a></li>
<li><a href="#">Thin Magic Mobile</a></li>
<li><a href="#">Performance Crusher</a></li>
<li><a href="#">Futuristic Experience</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-tv" href="#">Televisions</a>
<div class="mp-level">
<h2>Televisions</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li><a href="#">Flat Superscreen</a></li>
<li><a href="#">Gigantic LED</a></li>
<li><a href="#">Power Eater</a></li>
<li><a href="#">3D Experience</a></li>
<li><a href="#">Classic Comfort</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-camera" href="#">Cameras</a>
<div class="mp-level">
<h2>Cameras</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li><a href="#">Smart Shot</a></li>
<li><a href="#">Power Shooter</a></li>
<li><a href="#">Easy Photo Maker</a></li>
<li><a href="#">Super Pixel</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">Magazines</a>
<div class="mp-level">
<h2 class="icon icon-news">Magazines</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li><a href="#">National Geographic</a></li>
<li><a href="#">Scientific American</a></li>
<li><a href="#">The Spectator</a></li>
<li><a href="#">The Rambler</a></li>
<li><a href="#">Physics World</a></li>
<li><a href="#">The New Scientist</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-shop" href="#">Store</a>
<div class="mp-level">
<h2 class="icon icon-shop">Store</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-t-shirt" href="#">Clothes</a>
<div class="mp-level">
<h2 class="icon icon-t-shirt">Clothes</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-female" href="#">Women's Clothing</a>
<div class="mp-level">
<h2 class="icon icon-female">Women's Clothing</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li><a href="#">Tops</a></li>
<li><a href="#">Dresses</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sale</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-male" href="#">Men's Clothing</a>
<div class="mp-level">
<h2 class="icon icon-male">Men's Clothing</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li><a href="#">Shirts</a></li>
<li><a href="#">Trousers</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Sale</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a class="icon icon-diamond" href="#">Jewelry</a>
</li>
<li>
<a class="icon icon-music" href="#">Music</a>
</li>
<li>
<a class="icon icon-food" href="#">Grocery</a>
</li>
</ul>
</div>
</li>
<li><a class="icon icon-photo" href="#">Collections</a></li>
<li><a class="icon icon-wallet" href="#">Credits</a></li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
<div class="scroller"><!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a style="width:50%;" href="#" id="trigger"><h2><span>Menu Bar</span></h2></a>
<span class="right"><a href="collegemagnum.com"><h2><span>College Magnum</span></h2></a></span>
</div>
<div class = "home">
<div class="slider_section"> <!-- Slideshow 1 -->
<ul class="rslides" id="slider1">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
<header class="codrops-header">
<h1>Hello And Welcome To a New Type of Site<span>We are a website for the College Student by the Student! We have just updated to a user and device friendly interface. So please feel free to push it to the limit!</span></h1>
</header>
</div>
<div class="news_section">
<div>
<img class="news_image" src="images/1.jpg" alt="">
<div class="news_story">
<span>Hello And Welcome To a New Type of Site</span>
<p> Nisl adhuc moderatius pri ex. Nec melius mentitum reprimique ne. Zril efficiendi suscipiantur eum ad, mutat consequuntur usu ea. Ea usu dicam reprimique, an sit nibh ocurreret, quod incorrupte at vim. Docendi scripserit quo eu. His libris graecis ei, vitae eleifend antiopam ne est, velit mollis pro in.</p>
</div>
</div>
<div>
<img class="news_image" src="images/2.jpg" alt="">
<div class="news_story">
<span>Hello And Welcome To a New Type of Site</span>
<p> Nisl adhuc moderatius pri ex. Nec melius mentitum reprimique ne. Zril efficiendi suscipiantur eum ad, mutat consequuntur usu ea. Ea usu dicam reprimique, an sit nibh ocurreret, quod incorrupte at vim. Docendi scripserit quo eu. His libris graecis ei, vitae eleifend antiopam ne est, velit mollis pro in.</p>
</div>
</div>
<div>
<img class="news_image" src="images/3.jpg" alt="">
<div class="news_story">
<span>Hello And Welcome To a New Type of Site</span>
<p> Nisl adhuc moderatius pri ex. Nec melius mentitum reprimique ne. Zril efficiendi suscipiantur eum ad, mutat consequuntur usu ea. Ea usu dicam reprimique, an sit nibh ocurreret, quod incorrupte at vim. Docendi scripserit quo eu. His libris graecis ei, vitae eleifend antiopam ne est, velit mollis pro in.</p>
</div>
</div>
<div>
<img class="news_image" src="images/1.jpg" alt="">
<div class="news_story">
<span>Hello And Welcome To a New Type of Site</span>
<p> Nisl adhuc moderatius pri ex. Nec melius mentitum reprimique ne. Zril efficiendi suscipiantur eum ad, mutat consequuntur usu ea. Ea usu dicam reprimique, an sit nibh ocurreret, quod incorrupte at vim. Docendi scripserit quo eu. His libris graecis ei, vitae eleifend antiopam ne est, velit mollis pro in.</p>
</div>
</div>
<div>
<img class="news_image" src="images/2.jpg" alt="">
<div class="news_story">
<span>Hello And Welcome To a New Type of Site</span>
<p> Nisl adhuc moderatius pri ex. Nec melius mentitum reprimique ne. Zril efficiendi suscipiantur eum ad, mutat consequuntur usu ea. Ea usu dicam reprimique, an sit nibh ocurreret, quod incorrupte at vim. Docendi scripserit quo eu. His libris graecis ei, vitae eleifend antiopam ne est, velit mollis pro in.</p>
</div>
</div>
</div>
</div>
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</div><!-- /pusher -->
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/mlpushmenu.js"></script>
<script>
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
</script>
</body>
</html>
现在是css：
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body, .container, .scroller {
height: 100%;
}
.home{
width: auto;
height: auto;
overflow:hidden;
}
.slider_section{
float: left;
width: 50%;
height: auto;
}
.news_section{
width: 50%;
float: right;
overflow:auto;
height: auto;
}
.news_image{
width: 45%;
height: 175px;
float: left;
}
.news_story{
width: 55%;
height: 175px;
padding: 5px;
float: right;
overflow:auto;
font-family: 'Lato', Arial, sans-serif;
padding: .5em;
margin: 0;
font-weight: 200;
font-size: 1.4em;
line-height: 1.3;
}
.news_story p {
margin: 0 auto;
padding: .5em;
margin: 0;
font-weight: 200;
font-size: .65em;
line-height: 1.1;
}
.news_story span {
text-decoration:underline;
text-transform:uppercase;
text-align:center;
}
}
.scroller {
overflow-y: scroll;
}
.scroller,
.scroller-inner {
position: relative;
}
.container {
position: relative;
overflow: hidden;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #1D78EF),
color-stop(1, #5BCBFF)
);
background-image: -o-linear-gradient(bottom, #1D78EF 0%, #5BCBFF 100%);
background-image: -moz-linear-gradient(bottom, #1D78EF 0%, #5BCBFF 100%);
background-image: -webkit-linear-gradient(bottom, #1D78EF 0%, #5BCBFF 100%);
background-image: -ms-linear-gradient(bottom, #1D78EF 0%, #5BCBFF 100%);
background-image: linear-gradient(to bottom, #1D78EF 0%, #5BCBFF 100%);
}
.menu-trigger {
position: relative;
padding-left: 60px;
font-size: 0.9em;
}
.menu-trigger:before {
position: absolute;
top: 2px;
left: 0;
width: 40px;
height: 6px;
background: #fff;
box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff;
content: '';
}
.mp-pusher {
position: relative;
left: 0;
height: 100%;
}
.mp-menu {
position: absolute; /* we can't use fixed here :( */
top: 0;
left: 0;
z-index: 1;
width: 300px;
height: 100%;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.mp-level {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #1D63F0),
color-stop(0.4, #303030)
);
background-image: -o-linear-gradient(top, #1D63F0 0%, #303030 40%);
background-image: -moz-linear-gradient(top, #1D63F0 0%, #303030 40%);
background-image: -webkit-linear-gradient(top, #1D63F0 0%, #303030 40%);
background-image: -ms-linear-gradient(top, #1D63F0 0%, #303030 40%);
background-image: linear-gradient(to top, #1D63F0 0%, #303030 40%);
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
/* overlays for pusher and for level that gets covered */
.mp-pusher::after,
.mp-level::after,
.mp-level::before {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
content: '';
opacity: 0;
}
.mp-pusher::after,
.mp-level::after {
background: rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
-moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
}
.mp-level::after {
z-index: -1;
}
.mp-pusher.mp-pushed::after,
.mp-level.mp-level-overlay::after {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.mp-level.mp-level-overlay {
cursor: pointer;
}
.mp-level.mp-level-overlay.mp-level::before {
width: 100%;
height: 100%;
background: transparent;
opacity: 1;
}
.mp-pusher,
.mp-level {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
/* overlap */
.mp-overlap .mp-level.mp-level-open {
box-shadow: 1px 0 2px rgba(0,0,0,0.2);
-webkit-transform: translate3d(-40px, 0, 0);
-moz-transform: translate3d(-40px, 0, 0);
transform: translate3d(-40px, 0, 0);
}
/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
box-shadow: none;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* cover */
.mp-cover .mp-level.mp-level-open {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
/* content style */
.mp-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.mp-menu h2 {
margin: 0;
padding: 1em;
color: #F7F7F7;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
font-weight: 300;
font-size: 2em;
}
.mp-menu.mp-overlap h2::before {
position: absolute;
top: 0;
right: 0;
margin-right: 8px;
font-size: 75%;
line-height: 1.8;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
transition: opacity 0.3s, transform 0.1s 0.3s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
.mp-menu.mp-cover h2 {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
font-size: 1em;
}
.mp-overlap .mp-level.mp-level-overlay > h2::before {
opacity: 1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
.mp-menu ul li > a {
display: block;
padding: 0.7em 1em 0.7em 1.8em;
outline: none;
box-shadow: inset 0 -1px rgba(0,0,0,0.2);
text-shadow: 0 0 1px rgba(255,255,255,0.1);
font-size: 1.4em;
-webkit-transition: background 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
.mp-menu ul li::before {
position: absolute;
left: 10px;
z-index: -1;
color: rgba(0,0,0,0.2);
line-height: 3.5;
}
.mp-level > ul > li:first-child > a {
box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}
.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
background: rgba(0,0,0,0.2);
box-shadow: inset 0 -1px rgba(0,0,0,0);
}
.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
box-shadow: inset 0 -1px rgba(0,0,0,0);
}
.mp-back {
background: rgba(0,0,0,0.1);
outline: none;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
display: block;
font-size: 0.8em;
padding: 1em;
position: relative;
box-shadow: inset 0 1px rgba(0,0,0,0.1);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
}
.mp-back::after {
font-family: 'linecons';
position: absolute;
content: "\e037";
right: 10px;
font-size: 1.3em;
color: rgba(0,0,0,0.3);
}
.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after {
background: transparent;
box-shadow: none;
color: transparent;
}
/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher {
padding-left: 300px;
}
.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level {
display: none;
}
.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level {
display: block;
}
答案 0 :(得分：1)
调用方法.responsiveSlides来自responsiveslides.min.js，您必须发布此内容并查看要执行的脚本。
答案 1 :(得分：0)
删除
html, body, .container, .scroller {
height: 100%;
}
来自你的CSS，它会完全滚动。
我告诉你删除的代码在正文上设置了固定的宽度和高度，因此它无法滚动更大比浏览器的高度（100％）。
答案 2 :(得分：0)
你必须给外部div的宽度/高度一些固定值。所以当内部Div的内容重叠时，Scroll将为外部Div的类设置“Overflow：auto”属性。
你可以尝试给一些固定的高度/宽度，如Windows高度或宽度到最外面的div，然后溢出内部div的内容，如果定义了“Overflow：auto”样式属性，应该得到Scroll。
希望这有帮助。