Question

我有一个非常讨厌的问题。我试图创建一个具有完整背景图像的页面，该页面调整大小并填充浏览器屏幕。目前它的一半工作但由于某种原因必须滚动20-30px下来。哪个用户不应该这样做。

这是页面来源：

<!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; 
}

我错过了一些明显的东西吗？感谢

Answer 1

很难确切地说出你在问什么，但如果要做的就是禁用滚动页面，首先需要添加<body>标签，并为其提供以下样式属性：

<body style="overflow:hidden;">
    <!-- Page contents -->
</body>

如何让页面停止垂直滚动？

1 个答案: