向下滚动时如何解决顶部的溢出问题？这是 Facebook 页面中的应用程序。这是谷歌浏览器快照。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo TITLE ?></title>
<link href="<?php echo CSS; ?>style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>-->
<script type="text/javascript" src="js/UnityObject2.js"></script>
<script type="text/javascript">
var config = {
width: 760,
height: 827,
params: {enableDebugging: "0"},
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function(progress) {
switch (progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function(e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "GermsBuster.unity3d");
});
</script>
<style type="text/css">
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: white;
color: black;
text-align: center;
}
a:link, a:visited {
color: #000;
}
a:active, a:hover {
color: #666;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 760px;
}
.back{
z-index:10 !important;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 827px;
width: 760px;
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<div id="fb-root" class="_56b8"></div>
<div class="video-ar" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_ar.php">video ar</a>
</div>
<div class="video-en" style="display:none">
<a class="fancybox fancybox.iframe" href="Products_en.php">video en</a>
</div>
<div class="fb-app-requests-container" style="display:none">request</div>
<div class="fb-user-info-container" style="display:none">user info</div>
<p class="header" style="display:none"><span><!--Unity Web Player | --></span><?php echo TITLE ?></p>
<div class="content" style="z-index:-1000 !important;">
<div id="unityPlayer" style="display:block; z-index:-1000 !important">
<div class="missing">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="images/getunity.png" width="193" height="63" />
</a>
</div>
<div class="broken">
<a href="https://unity3d.com/webplayer/" target="_blank" title="Unity Web Player. Install now! Restart your browser after install.">
<img alt="Unity Web Player. Install now! Restart your browser after install." src="images/getunityrestart.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<!-- LIGHTBOX -->
<script type="text/javascript" src="js/lightbox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
<!-- LIGHTBOX -->
</body>
</html>