0
我正在为某人开发一个网站，但我选择的模板有问题，并且在移动设备上包含一个非常尴尬的jscrollpane。我删除了jscrollpane，但主要内容仍然存在于jmpress滑块中。当移动设备的媒体查询处于活动状态时，内容溢出，但滚动条的正文不会对此进行调整： 
溢出存在但滚动不能容纳它
我不确定是什么原因造成的。 jmpress滑块包装的高度固定为475像素，但当其更改时，即使设置为绝对，定位也会发生显着变化。我如何引入滚动到内容底部的功能？
或多或少的功能版本可以找到here。部分代码如下：
@import url('normalize.css');
@import url("http://fonts.googleapis.com/css?family=Oswald:300,400,700");
@import url("http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,latin-ext,cyrillic");
/* =============================================================================
1. General
============================================================================= */
body {
font-family: 'PT Sans', Arial, Helvetica, sans-serif;
background-color: #FFF;
background-image: url(../images/body_backrounds/body_bg_1.png);
font-weight: 400;
font-size: 14px;
color: #666665;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
overflow: auto;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #E67068;
}
.container > header {
margin: 0px 0px 10px 0px;
padding: 20px 0px 10px 0px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-align: center;
}
/* =============================================================================
2. Content Changer
============================================================================= */
.jms-slideshow {
position: relative;
width: 100%;
height: 470px;
}
.jms-wrapper {
width: 100%;
height: 100%;
outline: none;
-webkit-appearance: none;
}
.step {
width: 960px;
height: 470px;
display: block;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.step:not(.active) {
opacity: 0;
filter: alpha(opacity=0);
/* internet explorer */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
/*IE8*/
}
#jms-content,
#jms-content2,
#jms-content3,
#jms-content4,
#jms-content5 {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
height: 470px;
overflow: ;
outline: none;
-webkit-appearance: none;
}
/** NOT SUPPORTED STYLES **/
.not-supported .jms-slideshow {
position: absolute;
width: 100%;
height: 100%;
}
.not-supported .step {
position: relative;
opacity: 1;
margin: 20px auto;
}
.not-supported .jms-wrapper {
width: 100%;
height: 100%;
outline: none;
-webkit-appearance: none;
}
/* =============================================================================
3. Main Menu
============================================================================= */
nav select {
display: none;
/* this is just for the mobile display */
}
#menu {
margin-bottom: 30px;
}
nav ul {
display: block;
list-style-type: none;
margin: 0 auto;
text-align: center;
width: 50%;
padding: 0;
-webkit-transition: all .25s ease-in;
-moz-transition: all .25s ease-in;
-o-transition: all .25s ease-in;
transition: all .25s ease-in;
}
nav li {
border-top: 2px solid #eee;
border-bottom: 2px solid #eee;
float: left;
display: inline;
margin: 0;
text-align: center;
width: 25%;
padding: 0;
}
nav li:hover {
border-top: 2px solid #cfd0ca;
border-bottom: 2px solid #cfd0ca;
}
nav li.active {
border-top: 2px solid #E67068;
border-bottom: 2px solid #E67068;
}
nav a {
display: block;
height: 100%;
padding: 1em 0;
text-decoration: none;
color: #999;
letter-spacing: 1px;
font-family: "Oswald", Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 300;
text-shadow: none;
}
nav a:hover a {
color: #E67068;
}
#nav .active a {
color: #292929;
outline: 0;
}
nav a,
nav li {
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
/* =============================================================================
4. Mobile Dropdown Menu
============================================================================= */
#dd_menu {
display: none;
width: 100%;
font-family: 'Oswald', Arial, Helvetica, sans-serif;
padding: 7px;
margin: 0 0 0 0;
outline: none;
}
/* =============================================================================
5. Blocks
============================================================================= */
.block {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #E67068;
padding: 20px 20px 20px 20px;
bottom: 30px;
border-radius: 30px 30px 30px 30px;
}
/* Block for Portfolio Tab */
.block2 {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #E67068;
padding: 0px 0px 0px 0px;
bottom: 30px;
border-radius: 30px 30px 30px 30px;
}
/* =============================================================================
6.Home Panel
============================================================================= */
.My_name {
text-align: center;
margin-top: 0;
margin-bottom: 30px;
}
.My_name h1 {
font-family: "Oswald", Arial, Helvetica, sans-serif;
font-weight: 300;
margin-top: 0px;
margin-bottom: 5px;
font-size: 60px;
line-height: 65px;
color: #292929;
}
.My_name h3 {
margin-bottom: 20px;
font-size: 18px;
line-height: 22px;
font-weight: 200;
color: #555556;
}
.portrait {
width: 100%;
display: block;
margin: 0;
padding: 0;
margin-top: 10px;
}
.portrait img {
width: 100%;
display: block;
margin: 0;
padding: 0;
border-radius: 20px 20px 20px 20px;
}
.general_info {
margin-top: 10px;
}
.general_info p {
margin: 0;
padding: 0;
margin-bottom: 20px;
}
/* social icons */
.social_icons ul {
width: 100%;
margin: 0;
padding: 0;
outline: none;
margin-bottom: 30px;
}
.social li {
float: left;
display: inline;
margin-right: 5px;
}
.social li a {
outline: 0;
}
.social img {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.social img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
/* personal info */
ul.personal-info {
margin: 10px 0 0 0;
padding-left: 0;
list-style: none;
}
ul.personal-info li {
margin-bottom: 12px;
}
ul.personal-info .title {
display: inline-block;
font-family: 'Oswald', Arial, Helvetica, sans-serif;
border-width: 2px;
border-style: solid;
border-color: #E67068;
border-radius: 22px 22px 22px 22px;
color: #333;
padding: 3px 10px;
position: relative;
font-size: 13px;
}
ul.personal-info .value {
margin-left: 10px;
}
ul.personal-info .available {
/* Font Color For Freelance Status = Available */
color: #6f803b;
}
ul.personal-info .not_available {
/* Font Color For Freelance Status = Not Available */
color: #803b3b;
}
/* =============================================================================
7. Resume Panel
============================================================================= */
.detailsCol {
width: 100%;
}
.detailsCol h3 {
font-size: 14px;
margin-bottom: 2px;
font-weight: 400;
}
.detailsCol ul {
margin: 0;
padding: 0;
padding-right: 10px;
font-size: 13px;
}
.detailsCol ul li {
display: inline-block;
width: 100%;
margin: 0 0 15px 0;
padding-left: 10px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #E67068;
}
.detailsCol ul li p {
margin: 5px 0px 5px 0px;
}
.detailsCol span {
font-family: 'PT Sans', Arial, Helvetica, sans-serif;
display: block;
float: left;
color: #b4b4b4;
}
.detailsCol span.date {
color: #E67068;
float: right;
font-size: 13px;
text-transform: none;
line-height: 11px;
margin-top: 7px;
text-decoration: none;
}
/* Skills */
.skillsInfo {
margin: 10px 0 0px 0;
}
.skillsInfo em {
position: relative;
margin-bottom: 2px;
font-size: 13px;
color: #292929;
font-family: "Oswald", Arial, Helvetica, sans-serif;
font-weight: 400;
font-style: normal;
}
.skill-container {
background-color: transparent;
width: 100%;
height: 12px;
border-color: #E67068;
border-width: 2px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border-style: solid;
margin-bottom: 10px;
}
.skill {
background-color: #ffa099;
height: 12px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 0px 6px;
border-radius: 6px 6px 6px 6px;
padding: 0 -1px 0 1px;
}
.skill-10 {
width: 10%;
}
.skill-20 {
width: 20%;
}
.skill-30 {
width: 30%;
}
.skill-40 {
width: 40%;
}
.skill-50 {
width: 50%;
}
.skill-60 {
width: 60%;
}
.skill-70 {
width: 70%;
}
.skill-80 {
width: 80%;
}
.skill-90 {
width: 90%;
}
.skill-100 {
width: 100%;
}
/* =============================================================================
8.Services Panel
============================================================================= */
.services {
margin-top: 30px;
}
.service {
text-align: center;
margin-bottom: 30px;
}
.service h4 {
margin-top: 10px;
}
.service img {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.service img:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
transform: rotate(720deg);
}
/* =============================================================================
9. Portfolio Panel
============================================================================= */
.portfolio {
width: 100%;
padding: 0;
margin-left: 5px;
}
/* Portfolio Items */
.portfolio li {
list-style: none;
float: left;
margin-bottom: 10px;
}
.portfolio a {
display: block;
text-decoration: none;
}
.portfolio h3 {
color: #E67068;
}
.portfolio img {
vertical-align: bottom;
width: 100%;
padding: 0;
margin: 0;
}
/* Portfolio Filter */
ul.filter {
overflow: hidden;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 15px;
margin-left: 20px;
list-style: none;
}
ul.filter li a {
float: right;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 12px;
padding: 5px 7px 5px 7px;
margin-top: 6px;
margin-left: 5px;
line-height: 13px;
background: #cfd0ca;
border-radius: 20px;
text-decoration: none;
-webkit-transition: all 80ms ease-in;
/* property duration timing-function delay */
-moz-transition: all 80ms ease-in;
/* property duration timing-function delay */
transition: all 80ms ease-in;
/* property duration timing-function delay */
}
.filter a:hover {
color: #FFF;
background: #E67068;
}
.filter .current a {
color: #FFF;
background: #E67068;
}
/* 3D Boxes Rotate Styles */
.rollover {
position: relative;
width: 100%;
height: 100%;
display: block;
float: left;
}
.short {
width: 100%;
height: 100%;
}
.front {
z-index: 2;
position: relative;
background: #fff;
}
.back {
z-index: 1;
position: absolute;
margin-top: -80% !important;
}
.rollover:hover .back,
.rollover:focus .back {
z-index: 2;
}
.rollover:hover .front,
.rollover:focus .front {
z-index: 1;
}
.fade .rollover .front {
opacity: 1;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.fade .rollover .back {
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.fade .rollover:hover .front,
.fade .rollover:focus .front {
opacity: 0;
}
.fade .rollover:hover .back,
.fade .rollover:focus .back {
opacity: 1;
}
.flip .rollover {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.flip .cube {
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
-moz-transform: rotateX(0) rotateY(0) rotateZ(0);
-ms-transform: rotateX(0) rotateY(0) rotateZ(0);
-o-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.flip .front {
-webkit-transform: translate3d(0, 0, 1px);
-moz-transform: translate3d(0, 0, 1px);
-ms-transform: translate3d(0, 0, 1px);
-o-transform: translate3d(0, 0, 1px);
transform: translate3d(0, 0, 1px);
}
.flip .back {
-webkit-transform: rotateY(180deg) translate3d(0, 0, 0);
-moz-transform: rotateY(180deg) translate3d(0, 0, 0);
-ms-transform: rotateY(180deg) translate3d(0, 0, 0);
-o-transform: rotateY(180deg) translate3d(0, 0, 0);
transform: rotateY(180deg) translate3d(0, 0, 0);
}
.flip .rollover:hover .cube,
.flip .rollover:focus .cube {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.box .front {
-webkit-transform: translate3d(0, 0, 60px) scale(0.9, 0.9);
-moz-transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
-ms-transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
-o-transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
transform: translate3d(0, 0, 60px) scale(0.85, 0.85);
}
.box .back {
-webkit-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.9, 0.9);
-moz-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
-ms-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
-o-transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
transform: rotateY(180deg) translate3d(0, 0, 60px) scale(0.85, 0.85);
}
/* =============================================================================
10. Contact Panel
============================================================================= */
#contactform {
margin-top: -7px;
padding-right: 20px;
}
.info_fieldset {
padding: 0;
margin: 0;
bottom: 5px;
background: none;
border: 0px;
}
label {
float: left;
width: 100%;
padding: 0 0 2px;
}
input[type="text"] textarea {
width: 100%;
}
input[type="submit"] {
padding: 0;
width: 100%;
margin: 5px 0 0;
}
/* =============================================================================
11. Media Queries
============================================================================= */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
.step {
width: 960px;
height: 470px;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.step {
width: 768px;
height: 470px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.step {
width: 300px;
height: 470px;
}
.block {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #E67068;
padding: 40px 40px 40px -20px;
margin-bottom: 30px;
border-radius: 20px 20px 20px 20px;
}
.end {
margin-bottom: 0;
}
.block2 {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #E67068;
padding: 0px 0px 0px 0px;
border-radius: 20px 20px 20px 20px;
}
nav ul {
display: none;
}
#dd_menu {
display: block;
}
.My_name h1 {
font-family: "Oswald", Arial, Helvetica, sans-serif;
font-weight: 300;
margin-top: 0px;
margin-bottom: 0px;
font-size: 40px;
line-height: 45px;
color: #292929;
}
.My_name h3 {
margin-top: 0px;
margin-bottom: 0px;
font-size: 15px;
line-height: 20px;
font-weight: 200;
color: #555556;
}
.portfolio img {
margin-bottom: 10px;
}
.portfolio {
width: 100%;
padding: 0;
margin: 0 0 0 0;
}
.jspDrag {
width: 6px;
height: 6px;
background: #999999;
position: relative;
opacity: 0.2;
border-radius: 10px 10px 10px 10px;
top: 0;
left: 0;
cursor: pointer;
margin-left: 0px;
}
a.trigger {
display: none;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.step {
width: 420px;
height: 470px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>First Last - Toronto Software Developer</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="The best in quality web and software development in the Toronto, Ontario area. Clients receive simple, robust solutions that are valuable to all." />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/jquery.qtip.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<!-- jmpress plugin -->
<script src="js/jms.js" type="text/javascript"></script>
<!-- extends the jmpress plugin -->
<script src="js/jmpress.js" type="text/javascript"></script>
<!-- jQuery Easing 1.3 -->
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<!-- Detect Mobile Browser -->
<script src="js/detectmobilebrowser.js" type="text/javascript"></script>
<!-- mousewheel -->
<script src="js/mousewheel.js" type="text/javascript"></script>
<!-- Quicksand -->
<script src="js/jquery.quicksand.js" type="text/javascript"></script>
<!-- prettyPhoto -->
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<!-- qTip -->
<script src="js/jquery.qtip.min.js" type="text/javascript"></script>
<!-- jQuery mobile gmaps -->
<script src="js/jquery.mobilegmap.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- Contact Form -->
<script src="js/contact_form.js" type="text/javascript"></script>
<!-- Settings -->
<script src="js/main.js" type="text/javascript"></script>
<!-- Modernizr -->
<script src="js/modernizr.custom.48780.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<noscript>
<style>
.step {
position: relative;
}
.step:not(.active) {
opacity: 1;
filter: alpha(opacity=99);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)";
}
.step:not(.active) a.jms-link {
opacity: 1;
margin-top: 40px;
}
</style>
</noscript>
</head>
<body>
<div class="container">
<header>
<div class="sixteen columns">
<div class="My_name">
<!-- <img src="images/logo.png" alt="logo"> -->
<h1>First Last</h1>
<h3>Software Developer</h3>
</div>
</div>
<!-- Primary Navigation -->
<nav id="menu" class="sixteen columns">
<ul id="nav">
<!-- <nav> -->
<li class="active">
<a href="#home">Home</a>
</li>
<li>
<a href="#resume">Resume</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<!-- Dropdown Menu For Mobile Device -->
<select id="dd_menu">
<option value="#home">Home</option>
<option value="#resume">Resume</option>
<option value="#services">Services</option>
<option value="#contact">Contact</option>
</select>
<!-- Dropdown Menu End -->
</nav>
<!-- Primary Navigation End -->
</header>
<!-- End Part of Title and Menu Navigation -->
<section id="jms-slideshow" class="jms-slideshow sixteen columns">
<!-- Home Subpage -->
<div id="home" class="step" data-x="6000" data-y="1600" data-rotate="0" data-scale="15">
<div id="jms-content">
<p>...</p>
</div>
</div>
<!-- Resume Subpage -->
<div id="resume" class="step" data-x="18000" data-y="2800" data-rotate="-30" data-scale="5">
<div id="jms-content2">
<p>...</p>
</div>
</div>
<!-- End Resume Subpage -->
<!-- Services Subpage -->
<div id="services" class="step" data-x="22000" data-y="2800" data-rotate="30" data-scale="3">
<div id="jms-content3">
<p>...</p>
</div>
</div>
<!-- End Services Subpage -->
<!-- Contact Subpage -->
<div id="contact" class="step" data-x="30000" data-y="6500" data-rotate="30" data-scale="3">
<div id="jms-content5">
<p>...</p>
</div>
</div>
<!-- End Contact Subpage -->
</section>
</div>
</body>
</html>
谢谢，但我无法在任何源代码中找到该代码。什么是回家和委派步骤？我只能在样式表中找到jms-wrapper。 – CanadaIT
更新了我的答案。 –
我明白了。我在style.css中进行了更改，但网站的行为没有任何区别。你知道这是为什么吗？ – CanadaIT