大约一分钟后，高度将被设置为仅显示在下面的代码段中的顶部栏，有人可以帮我解决这个问题吗？只是尝试运行脚本并看到它最终只显示顶部栏。任何和所有的帮助表示赞赏！执行自定义滚动条后发生此错误，如果这有助于任何人解决我的问题！
<link rel="stylesheet" href="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link rel="stylesheet" href="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css">
<style>
html, body{ height: 100%; }
</style>
</head>
<body class="full-page">
<header>
<hr />
</header>
<div id="demo">
<section id="examples">
<div class="content mCustomScrollbar" data-mcs-theme="minimal">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
.wrap {
position: relative;
}
.wrap .nav-bar .navbar-brand {
margin-top: 15px;
}
.wrap .nav-bar .navbar-form {
margin-top: 25px;
}
.wrap .nav-bar .nav {
float: right !important;
}
.wrap .nav-bar .nav .dropdown span.fa,
.wrap .nav-bar .nav .dropdown span.caret {
margin-right: 10px;
}
.wrap .nav-bar .nav .dropdown-menu {
background: #222;
left: auto;
width: 200px;
right: 0;
}
.wrap .nav-bar .nav .dropdown-menu > li > a {
color: #ddd;
padding: 8px;
}
.wrap .nav-bar .nav .dropdown-menu > li > a:hover {
background: #3355ff;
}
.wrap .side-menu-link {
left: 21em;
}
.wrap .burger {
position: relative;
width: 35px;
height: 30px;
left: 10px;
top: 5px;
z-index: 500000;
}
.wrap .burger .burger_inside {
position: absolute;
background-color: #222;
width: 30px;
height: 5px;
left: 2.5px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap .burger #bgrOne {
top: 0;
}
.wrap .burger #bgrTwo {
top: 10px;
}
.wrap .burger #bgrThree {
top: 20px;
}
.wrap #side-menu {
position: absolute;
z-index: -1;
background: #404040;
width: 22em;
padding-top: 40px;
padding-right: 20px;
padding-left: 10px;
float: left;
display: block;
left: 0;
height: 900px;
}
.wrap .content {
position: absolute;
right: 0;
min-width: 400px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrap .content .top-bar {
height: 40px;
background: #ddd;
}
.wrap .content .content-inner {
padding: 0;
margin: 0;
background: #fff;
padding-left: 20px;
display: block;
position: absolute;
height: 900px;
width: 100%;
}
.wrap ul.accordion {
width: 100%;
background: transparent;
}
.wrap ul.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #9D9D9D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #303030;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.wrap ul.accordion li:not(open) last-child .link {
border-bottom: 0;
}
.wrap ul.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #999;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.wrap ul.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.wrap ul.accordion li.open .link {
color: #FFB266;
}
.wrap ul.accordion li.open i {
color: #FFB266;
}
.wrap ul.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.wrap ul.accordion ul.submenu {
display: none;
background: transparent;
font-size: 14px;
padding: 0;
}
.wrap ul.accordion ul.submenu li {
border-bottom: 1px solid #4b4a5e;
list-style: none;
}
.wrap ul.accordion ul.submenu li a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.wrap ul.accordion ul.submenu li a:hover {
background: rgba(240, 128, 128, 0.8);
color: #ffb266;
}
@media screen and (max-width: 768px) {
.wrap .nav-bar .navbar-brand {
margin-top: 0;
padding-left: 0;
}
.wrap .side-menu-link {
display: inline-block;
}
.wrap #side-menu #qform {
position: absolute;
top: 10px;
}
.wrap .content {
left: 0;
}
.wrap.active .content {
left: 21em;
}
.wrap.active .content #bgrOne {
top: 10px;
transform: rotate(225deg);
}
.wrap.active .content #bgrTwo {
opacity: 0;
}
.wrap.active .content #bgrThree {
top: 10px;
transform: rotate(315deg);
}
}
@media screen and (min-width: 769px) {
.side-menu-link {
display: none;
}
.wrap {
position: relative;
}
.wrap .content {
left: 21em;
right: 0;
}
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
});
</script>
</head>
<body>
<!-- <body style="visibility: hidden !important;">
<div id="babasbmsgx" style="visibility: visible !important;">Please disable your adblock and script blockers to view this page</div>-->
<div class="wrap">
<nav class="nav-bar navbar-inverse" role="navigation">
<div id ="top-menu" class="container-fluid active">
<a class="navbar-brand" href="#">AntiMalwareProgram</a>
<ul class="nav navbar-nav">
<form id="qform" class="navbar-form pull-left" method="get" action="https://www.google.com/search" role="search">
<input type="text" class="form-control" name="q"
type="submit" placeholder="Search all of Google!" />
</form>
<li class="dropdown movable">
<img id="fa fa-4x fa-child" src="" >
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="fa fa-4x fa-child"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="https://www.authpro.com/auth/antimalwareprogram/?action=edit "><span class="fa fa-user"></span>Edit Profile</a></li>
<li><a href="https://www.authpro.com/auth/antimalwareprogram/?action=del "><span class="fa fa-gear"></span>Cancel Account</a></li>
<li class="divider"></li>
<li><a href="https://www.authpro.com/auth/antimalwareprogram/?action=logout
"><span class="fa fa-power-off"></span>Log Out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<aside id="side-menu" class="aside" role="navigation">
<ul class="nav nav-list accordion">
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-globe"></i>Current pages<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">About Current Pages(You Are Here)</a></li>
<li><a href="https://antimalwareprogram.co/joomla/index.php">Joomla Pages</a></li>
<li><a href="https://antimalwareprogram.co/wordpress/">Blogs</a></li>
<li><a href="https://antimalwareprogram.co/wiki/doku.php?id=wiki:welcome">Community Editable Wiki</a></li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-users"></i>Users<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="https://www.authpro.com/auth/antimalwareprogram/?action=edit">Edit Profile</a></li>
<li><a href="https://www.authpro.com/auth/antimalwareprogram/?action=del">Cancel Account</a></li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-cloud"></i>Forms<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="https://antimalwareprogram.co/Support_Tickets=true&active=true">Submit a support ticket</a></li>
<li><a href="https://antimalwareprogram.co/Feedback_Survey">Feedback Survey</a></li>
<li><a href="https://antimalwareprogram.co/Vote_For_Content">Vote For Content</a></li>
<li><a href="https://antimalwareprogram.co/Contact_Us">Contact Us</a></li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-map-marker"></i>Go Back/Forward Buttons<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a onclick="goBack()">Go Back</a></li>
<li><a onclick="goForward()">Go Forward</a></li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-file-image-o"></i>Other<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="https://antimalwareprogram.co/What's_New.php">What's New?</a></li>
<li><a href="https://antimalwareprogram.co/copyright_notice.php">© 2016-<?php echo date("Y");?></a></li>
<li><a href="/Mailing_List">Our Mailing List</a></li>
<li><a href="#">Comming Soon</a></li>
<li><a href="#">Comming Soon</a></li>
</ul>
</li>
<li class="nav-header">
<div class="link"><i class="fa fa-lg fa-file-image-o"></i>AntiMalwareProgram!<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="/results.html">Results</a></li>
<li><a href="/dashboard">Dashboard</a></li>
<li><a href="/test-malware.html">Malware Test</a></li>
</ul>
</li>
<img id="myImg" src="https://antimalwareprogram.co/RapidSSL_SEAL-90x50.gif" alt="Rapid SSL Image" width="100%" height="100">
</ul>
</aside>
<!--Body content-->
<div class="content">
<div class="top-bar">
<a href="#menu" class="side-menu-link burger">
<span class='burger_inside' id='bgrOne'></span>
<span class='burger_inside' id='bgrTwo'></span>
<span class='burger_inside' id='bgrThree'></span>
</a>
</div>
<section class="content-inner">
<script>
function goBack() {
window.history.back();
}
</script>
<script>
function goForward() {
window.history.forward();
}
</script>
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-7824087727433149",
enable_page_level_ads: true
});
</script>
<!-- Google Code for antimalwareprogram.co Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 934367017;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "PWD9CPGJ13MQqZ7FvQM";
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/934367017/?label=PWD9CPGJ13MQqZ7FvQM&guid=ON&script=0"/>
</div>
</noscript>
<ul class='custom-menu'>
<li data-action = "first">First thing</li>
<li data-action = "second">Second thing</li>
<li data-action = "third">Third thing</li>
</ul>
<style>
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
</style>
<script>
<!--
This code is developed by Anand Roshan for www.voidtricks.com tutorial
Tutorial URI : http://www.voidtricks.com/custom-right-click-context-menu/
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.menu{
width: 100px;
background: #000;
color: #fff;
position:absolute;
z-index: 999999;
display: none;
box-shadow: 0 0 10px #713C3C;
}
.menu ul{
list-style: none;
padding: 0;
margin:0;
}
.menu ul a{
text-decoration: none;
}
.menu ul li{
width: 100%%;
padding: 6%;
background-color: #F04D44;
color: #fff;
}
.menu ul li:hover{
background-color: grey;
color: red;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("html").on("contextmenu",function(e){
//prevent default context menu for right click
e.preventDefault();
var menu = $(".menu");
//hide menu if already shown
menu.hide();
//get x and y values of the click event
var pageX = e.pageX;
var pageY = e.pageY;
//position menu div near mouse cliked area
menu.css({top: pageY , left: pageX});
var mwidth = menu.width();
var mheight = menu.height();
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//if window is scrolled
var scrTop = $(window).scrollTop();
//if the menu is close to right edge of the window
if(pageX+mwidth > screenWidth){
menu.css({left:pageX-mwidth});
}
//if the menu is close to bottom edge of the window
if(pageY+mheight > screenHeight+scrTop){
menu.css({top:pageY-mheight});
}
//finally show the menu
menu.show();
});
$("html").on("click", function(){
$(".menu").hide();
});
});
</script>
</head>
<body>
<!-- Menu div initially hidden -->
<div class="menu">
<ul>
<li><a href="https://antimalwareprogram.co/pages.php">Home</a></li>
<li><a href="https://antimalwareprogram.co/dashboard.html">Main Dashboard</a></li>
<li><a href="https://antimalwareprogram.co/Mailing_List">Newsletter</a></li>
<li><a href="https://antimalwareprogram.co/Feedback_Survey">Feedback</a></li>
<li><a href="https://antimalwareprogram.co/Contact_Us">Contact Us</a></li>
</ul>
</div>
</body>
</html>
<!--
This code is developed by Anand Roshan for www.voidtricks.com tutorial
Tutorial URI : http://www.voidtricks.com/custom-right-click-context-menu/
-->
<!DOCTYPE html>
<script>
;
</script>
<html>
<head>
<title>Custom Right Click Menu</title>
<style type="text/css">
.menu{
width: 300px;
background: #000;
color: #fff;
position:absolute;
z-index: 999999;
display: none;
box-shadow: 0 0 10px #713C3C;
}
.menu ul{
list-style: none;
padding: 0;
margin:0;
}
.menu ul a{
text-decoration: none;
}
.menu ul li{
width: 88%;
padding: 6%;
background-color: transparent;
color: #fff;
}
.menu ul li:hover{
background-color: grey;
color: white;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("html").on("contextmenu",function(e){
//prevent default context menu for right click
e.preventDefault();
var menu = $(".menu");
//hide menu if already shown
menu.hide();
//get x and y values of the click event
var pageX = e.pageX;
var pageY = e.pageY;
//position menu div near mouse cliked area
menu.css({top: pageY , left: pageX});
var mwidth = menu.width();
var mheight = menu.height();
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//if window is scrolled
var scrTop = $(window).scrollTop();
//if the menu is close to right edge of the window
if(pageX+mwidth > screenWidth){
menu.css({left:pageX-mwidth});
}
//if the menu is close to bottom edge of the window
if(pageY+mheight > screenHeight+scrTop){
menu.css({top:pageY-mheight});
}
//finally show the menu
menu.show();
$("html").on("click", function(){
$(".menu").hide();
});
});
</script>
</head>
<body>
<!-- Menu div initially hidden -->
<div class="menu">
<ul>
</ul>
</div>
</section>
</div>
</div>
<script type="text/javascript">
$(function() {
var accordionActive = false;
$(window).on('resize', function() {
var windowWidth = $(window).width();
var $topMenu = $('#top-menu');
var $sideMenu = $('#side-menu');
if (windowWidth < 768) {
if ($topMenu.hasClass("active")) {
$topMenu.removeClass("active");
$sideMenu.addClass("active");
var $ddl = $('#top-menu .movable.dropdown');
$ddl.detach();
$ddl.removeClass('dropdown');
$ddl.addClass('nav-header');
$ddl.find('.dropdown-toggle').removeClass('dropdown-toggle').addClass('link');
$ddl.find('.dropdown-menu').removeClass('dropdown-menu').addClass('submenu');
$ddl.prependTo($sideMenu.find('.accordion'));
$('#top-menu #qform').detach().removeClass('navbar-form').prependTo($sideMenu);
if (!accordionActive) {
var Accordion2 = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.movable .link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
}
Accordion2.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.movable .submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion2($('ul.accordion'), false);
accordionActive = true;
}
}
}
else {
if ($sideMenu.hasClass("active")) {
$sideMenu.removeClass('active');
$topMenu.addClass('active');
var $ddl = $('#side-menu .movable.nav-header');
$ddl.detach();
$ddl.removeClass('nav-header');
$ddl.addClass('dropdown');
$ddl.find('.link').removeClass('link').addClass('dropdown-toggle');
$ddl.find('.submenu').removeClass('submenu').addClass('dropdown-menu');
$('#side-menu #qform').detach().addClass('navbar-form').appendTo($topMenu.find('.nav'));
$ddl.appendTo($topMenu.find('.nav'));
}
}
});
/**/
var $menulink = $('.side-menu-link'),
$wrap = $('.wrap');
$menulink.click(function() {
$menulink.toggleClass('active');
$wrap.toggleClass('active');
return false;
});
/*Accordion*/
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('ul.accordion'), false);
});
</script>
</body>
</html>
</section>
</div>
<footer>
<hr />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://manos.malihu.gr/repository/js/minified/jquery-1.11.0.min.js"><\/script>')</script>
<!-- custom scrollbar plugin -->
<script src="http://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).on("load",function(){
$("body").mCustomScrollbar({
theme:"minimal"
});
});
})(jQuery);
</script>
</body>
</html>
答案 0 :(得分：0)
我修复了问题，问题是css中的错误position absolute