Question

我正在尝试创建以下结构：

固定导航，固定的全屏封面/排行榜，该内容在页面内容后消失，最后显示固定的页脚。该功能适用于Chrome和Firefox，但不适用于Safari。在Safari中，margin-bottom：300px不会出现，并且＃page-content div在底部。它似乎是由html：100％引起的；但如果没有它，则排行榜图像不会全屏显示。任何帮助将不胜感激，谢谢

	    jQuery(document).ready(function() {
  		    jQuery(window).scroll(function() {
    		    if (jQuery(this).scrollTop() > 1000) {
				    jQuery('footer').show();
    	   	    } else {
      			    jQuery('footer').hide();
    		    }
  		    });
	    });

 body, html {
	    margin:0;
	    height: 100%;
    }
	
    header {
    	width: 100%;
	    height: 100px;
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    background-color: #303030;
	    z-index: 4;
    }
	
    #leaderboard {
	    min-height: 100%;
        height: 100%;
	    width: 100%;
	    position: fixed;
        background-color: #4650f6;
	    z-index: 1;
    }
	
    #wrapper {
        height: 100%;
    }
	
    #page-content {
        height: 1800px;
	    position: relative;
	    background-color: #FF7C00;
	    z-index: 3;
	    margin-bottom: 300px;
    }
	
    footer {
	   width: 100%;
	   height: 300px;
	   position: fixed;
	   bottom: 0;
	   left: 0;
	   right: 0;
	   background-color: #1CD412;
	   z-index: 2;
	   display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    </head>

    <body>
	    <header></header>
	    <div id="wrapper">
		    <div id="leaderboard"></div>
	    </div>
	    <div id="page-content"></div>   

	    <footer></footer>
	
    </body>
    </html>

全屏封面图像和页脚显示-Safari浏览器问题

0 个答案: