comment obtenir la page d'arrêter de défilement verticale?

J'ai vraiment ennuyeux problème. Im essayant de créer une page avec une complète image de fond qui redimensionne et remplit l'écran du navigateur. Actuellement, son demi de travail, mais pour une raison que d'avoir à défiler comme 20-30px vers le bas. De laquelle l'utilisateur ne devrait pas être en mesure de le faire.

C'est la source de la page:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/css/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/layout.css" rel="stylesheet" type="text/css" />
<link href="/Content/css/scroll.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="/Scripts/backstretch.js" type="text/javascript"></script>
<script type="text/javascript">     
/**     var images = [
"/content/images/bghome.jpg",
"/content/images/background.jpg"
];      
var index = 0;     
$.backstretch(images[index], { speed: 500 }); 
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
**/
$.backstretch("/content/images/background.jpg");
</script>
</head>     
<div class="menu-link">
<ul>
<li>
<a href="/Home/Index">home</a>
</li>
<li>
<a href="/content/1/10/background.html">profile</a>
</li>
<li>
<a href="/content/1/3/portfolio.html">portfolio</a>
</li>
<li>
<a href="/news/">news</a>
</li>
<li>
<a href="/project/">current projects</a>
</li>
<li class="on">
<a href="/content/1/6/awards.html">awards</a>
</li>
<li>
<a href="/ContactUs/">contact</a>
</li>
</ul>      </div>
<div id="left-sidebar">
<div id ="logo">
<image src="/content/images/logo.png"/>
</div>
<div id = "leftcontent">
<p>
</p> 
</div>              
<div id ="foot">
<ul>
<li>
<a href="/content/2/20/privacy.html">Privacy</a>
</li>
<li>
<a href="/content/2/21/sitemap.html">Sitemap</a>
</li>
<li class="last">
<a href="/content/2/19/terms---conditions.html">Terms & Conditions</a>
</li>
</ul>
© 2012 SH Structures. All rights reserved. &nbsp;&nbsp;&nbsp;<image src="/content/images/footimg.png"/>
</div>
</div>
<div id="right-sidebar">
</div>
<div id="content">
<div id = "freestylecontent">
<h1>awards</h1>
<br><br><br>
<div id = "freecontent">
<p>
</p> 
<br><br>
</div> 
</div>    
</div>
</html>

Css:

 html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
}
/* IE7 Fix */
* html #container {
display: table;
height: 100%
}
/* Opera Fix */
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;
}
/* IE6 Fix */
* html div#body {
overflow: visible;
}
div#container {
height: 100%;
height: auto !important;
background: url("left-sidebar-back.gif") repeat-y top left;
}
div#main {
overflow: auto;
padding-bottom: 100px;
}
div#header {
height: 100px;
background: #ba6f19;
border-bottom: 1px solid #000;
padding: 20px;
}
div#body {
overflow: hidden;
height: 100%;
}
div#content {
margin: 0px 0px 0px 415px;
width: 375px;
padding: 20px;
background:url(../images/greenfade.png);
opacity:0.8;  
height:100%; 
color:White;
}
div#left-sidebar {
width: 375px;
float: left;
height:100%;
padding: 20px;
background:black;
opacity:0.8;  
color:White;
}
div#right-sidebar {
width: 260px;
float: right;
padding: 20px;
}
div#footer {
background: #ba6f19;
border-top: 1px solid #000;
position: relative;
height: 100px;
margin-top: -101px;
clear: both;
}
div#footer p {
padding: 20px;
margin: 0px;
}
.menu-link{
font-size:1em;
height:40px;
padding-left:10px;
width:100%; 
margin-left:auto;
margin-right:auto;
background:black;
}
.menu-link a{
padding: 10px 0px 10px 0px;
height:40px;
color:#fff;
text-decoration:none;
float:left;
}
.menu-link ul { 
padding:0px 0px 0px 20px;
}
.menu-link ul li    
{
text-decoration:none;
float:left;
/**background: url(/Content/img/border-line-inside.png) no-repeat right;**/
}
.menu-link ul li a {
color:#fff;
padding: 0px 10px 0px 10px;
line-height:40px;
display: block; 
text-align:center;
}
.menu-link a:hover{
background:url(../images/menu-nav-hov.png) repeat-x;
cursor:pointer; 
}
.menu-link ul li.on {
background:url(../images/menu-nav-hov.png) repeat-x;
/** background-position:center bottom;
background-repeat:no-repeat;
**/
}
/** Side Menu **/
.sideMenu ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;   
}
.sideMenu ul
{    
padding: 15px 0px 0px 0px;  
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;   
margin-left:-10px;
}
.sideMenu ul a{
padding: 2px 20px 0px 0px;  
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer; 
padding-left:-15px;
}
.sideMenu h4{
display:none;
}
/** Footer **/
#foot
{
padding-left: 20px;
padding-right: 20px;
position:absolute;
bottom:0;
height:60px;
height:1.5em;
font-size:.8em;
}
#foot li a
{
padding: 10px 0px 10px 0px; 
color:#fff;
text-decoration:none; 
}

Ai-je raté quelque chose d'évident? grâce

Euh... Dans votre code html est-il une raison pour laquelle vous n'avez pas la balise body n'importe où?
live exemple pls (jsfiddle)

OriginalL'auteur Beginner | 2012-02-10

css html

7

Il est difficile de dire exactement ce que vous demandez, mais si tout ce que vous voulez faire est de désactiver le défilement de la page, vous devez d'abord ajouter un <body> tag et lui donner le style suivant propriétés:
```
<body style="overflow:hidden;">

</body>
```
OriginalL'auteur Andrew Ensley

$('body').on('touchmove', function (event) {
event.preventDefault();
});

cela pourrait fonctionner

OriginalL'auteur Martian2049

Vous devez vous connecter pour publier un commentaire.