固定股利停止整个页面滚动从

我想创建一个网站，在后台的固定div来充当映衬内容的背景。当我在CSS中将其设置为position:fixed时，页面将不再滚动，并且任何其他方式似乎都会破坏页面。有什么建议么？固定股利停止整个页面滚动从

（DIV的我谈论它的顶部有一个与BG-容器类）。

的index.php：（该<p>标签是我测试页面滚动）

<!DOCTYPE html> 

<html> 
<!-- 00a7fe --> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Sublimity Gaming</title> 
<link href="main.css" rel="stylesheet" type="text/css"/> 
</head> 

<body> 
    <div class="bg-container"> 
    <div class="main"> 
     <div class="header"> 
     <div id="logo-pos" style="height:100%;padding-bottom:100px"> 
      <a class="logo-sublimity" href="index.php" style="top:25px; left:60px"></a> 
      <a class="logo-gaming" href="index.php" style="top:25px; right:60px"></a> 
     </div> 
     <div id="nav-pos"> 
      <p style="color:white; padding:100px">Point1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Point2<br><br><br><br><br><br><br><br>Point3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Point4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Point5</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</body> 

</html>

而且我的main.css：

@charset "utf-8"; 
@font-face { 
    font-family: "Roboto Lt"; 
    font-weight: normal; 
    font-style: normal; 
} 
* { 
    padding:0;margin:0 
} 
html, body { 
    position:absolute; 
    height:auto; 
    overflow:auto 
} 
body { 
    background-image:url('imgs/bg1.jpg'); background-color:black; 
    background-position:top left; font-family:"Roboto Lt"; 
    font-size:14px; width:100%; position:fixed; 
} 
.main { 
    background:transparent no-repeat top center; 
    margin:0 auto; 
    width:100%; padding-top:180px; padding-bottom: 24px; 
} 
.bg-container { 
    background:url('imgs/container-bg.png') transparent top center fixed; 
    background-repeat:repeat-y; 
    width:1025px; height:100%; 
    left:50%; margin-left:-512.5px; 
    display:inline-block; position:fixed 
} 
.header { 
    background:transparent no-repeat top center; 
    margin:auto; height:180px; width:100%; 
    position:absolute; margin-top:-180px 
} 
.logo-sublimity { 
    background:url('imgs/logo-sublimity.png') no-repeat; 
    width:447px;height:129px; 
    position:absolute; display:block 
} 
.logo-gaming { 
    background:url('imgs/logo-gaming.png') no-repeat; 
    width:379px; height:129px; 
    position:absolute; display:block 
} 
.nav-bar-container { 
    /*TODO*/ 
}

来源

2013-07-08 user2465057

为什么不只是设置background-attachment：fixed而不是使用固定div？ http://www.w3schools.com/cssref/pr_background-attachment.asp – vauge

您可以使用jQuery的backstretch 。 Backstretch是一个jQuery插件，允许您将动态调整大小的背景图像添加到任何页面。图像将拉伸以适应页面，并且会随着窗口大小的改变而自动调整大小。

下面是一个例子：

http://srobbin.com/jquery-plugins/backstretch/

来源

2013-07-08 14:14:58

看起来你把所有的内容里面的.bg-container DIV的，所以当你将其与整个屏幕宽度设置为固定的位置，你”消除滚动能力。简单修正：

<body> 
    <div class="bg-container"> </div> 

    <div class="main"> 
    [ ... ]

来源

2013-07-08 14:51:07 DACrosby

啊谢谢！以为我曾尝试过，但似乎没有，现在全部修好了！ – user2465057

@ user2465057很高兴帮助！如果是这样，请将此答案标记为正确答案，谢谢！ – DACrosby

固定股利停止整个页面滚动从

回答

相关问题