Question

页面底部和页脚之间存在间隙，我无法弄清楚如何修复，我的背景左右图像也不会在y轴上重复。任何人都可以帮助解决这个问题的原因吗？感谢帮助！ :) 谢谢！编辑我已经意外地在代码的x轴上重复了它，但它仍然没有在y轴上重复，这真的让人感到困惑！

/*----------Menu Sticky Script Start----------*/
$(window).scroll(function() {
if ($(this).scrollTop() > 128){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});
/*----------Menu Sticky Script Start----------*/
/*----------Menu Sticky Script Start----------*/
function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky-anchor').height($('#sticky').outerHeight());
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}
$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
var dir = 1;
var MIN_TOP = 200;
var MAX_TOP = 350;
function autoscroll() {
    var window_top = $(window).scrollTop() + dir;
    if (window_top >= MAX_TOP) {
        window_top = MAX_TOP;
        dir = -1;
    } else if (window_top <= MIN_TOP) {
        window_top = MIN_TOP;
        dir = 1;
    }
    $(window).scrollTop(window_top);
    window.setTimeout(autoscroll, 100);
}
/*----------Menu Sticky Script End----------*/
/*----------Sidebar Right Sticky Script Start----------*/
        $(function() {
            var offset = $("#sidebar-right").offset();
            var topPadding = 140;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar-right").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar-right").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
/*----------Sidebar Right Sticky Script End----------*/
/*----------Sidebar Left Sticky Script Start----------*/
        $(function() {
            var offset = $("#sidebar-left").offset();
            var topPadding = 140;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#sidebar-left").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#sidebar-left").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
/*----------Sidebar Left Sticky Script End----------*/
/*----------Footer Script Start----------*/
	$(document).ready(function(){
  		$(window).resize(function(){
			    var footerHeight = $('.footer').outerHeight();
			    var stickFooterPush = $('.push').height(footerHeight);
		
    			$('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
		    });
		
    		$(window).resize();
	    });
/*----------Footer Script End----------*/

/*--------------------
Website Styling Start
--------------------*/
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html, body {
	height: 100%;
	background-color:red;
	margin:0;
	padding:0;
	font-family: sans-serif;
	color: white;
	}
html {position: relative;min-height: 100%;}
body {
	background-image: url(../../images/background/backgroundleft.jpg), url(../../images/background/backgroundright.jpg);
	background-repeat: repeat-x;
	background-position: top left, top right;
}
.page-wrap{margin: 0 auto; width : 100%; 
  min-height: 100%;
  height: auto !important;
  height: 100%;


}
/*--------------------
Website Styling End
--------------------*/
/*----------------------------------------*/
/*--------------------
Content Styling Start
--------------------*/
#banner{
	background-color: #7B007A;
	width: 100%;
	padding: 40px 0;
	color: white;
	text-align: center;
}
header{
	width: 100%;
	text-align: center;
	font-size: 20px;
	line-height: 80px;
	height: 120px;
	background: #335C7D;
	color: #fff;
	transition: all 0.4s ease;
	overflow: hidden;
	padding: 0;
	margin: 0;
	}
header.sticky {
 	font-size: 24px;
 	line-height: 48px;
  	height: 80px;
  	background: #8A492C;
  	text-align: left;
  	padding-left: 20px;
}
#content{float:left;width:70%;background-color: white; color: black; }
#sidebar-right{float:right;width:15%; background-color: #565656; display: inline-block;}
#sidebar-left{float:left;width:15%; background-color: #565656;}


footer {
    bottom: 0;
    height: 300px;
    width: 100%;
    display: inline-block;
	

} 
#footertop {
	height: 20%;
	background-color: #346725;
}
#footerbottom {
	height: 80%;
	background-color: #363636;
}

 /*---
 /*--------------------
Content Styling End
--------------------*/
/*----------------------------------------*/
/*--------------------
Scripting Styling Start
--------------------*/


#sticky {
 width: 100%;
}

#sticky.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}

/*--------------------
Scripting Styling End
--------------------*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--HTML Start-->
<!--------------------------->
<div id="banner">
<p>Banner</p>
</div>
<div id="sticky-anchor"></div>
<div id="sticky">
<header><h1>Sticky Header</h1></header>
</div>
<div class="page-wrap">
<div id="sidebar-right">
    <p>Sticky Sidebar</p>
    <p>Sticky Sidebar</p>
    <p>Sticky Sidebar</p>
    <p>Sticky Sidebar</p>
</div>
<div id="sidebar-left">
    <p>Sticky Sidebar</p>
    <p>Sticky Sidebar</p>
    <p>Sticky Sidebar</p>
    <p>Sticky Sidebar</p>
</div>
<div id="content">
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
    <p>Filler filler filler......</p>
</div>

</div>

<footer class="footer">
<div id="footertop">
</div>
<div id="footerbottom">
</div>
</footer>

页脚未完全刷新，背景图像不重复y轴

0 个答案: