文章/答案/技术大牛

发布

社区首页 >问答首页 >Fixed Div停止滚动整个页面

问Fixed Div停止滚动整个页面
EN

Stack Overflow用户

提问于 2013-07-08 22:08:06

回答 2查看 963关注 0票数 0

我试图创建一个在背景中固定div的网站，作为背景内容的背景。当我在CSS中将其设置为position:fixed时，页面将不再滚动，任何其他方式似乎都会破坏页面。有什么建议吗？

(我正在讨论的div是带有bg-container类的最上面的div)。

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*/
}

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-07-08 22:51:07

看起来您的所有内容都在.bg-container目录中，所以当您将其设置为具有全屏幕宽度的固定位置时，您正在消除滚动功能。轻松修复：

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

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

票数 0

Stack Overflow用户

发布于 2013-07-08 22:14:58

您可以使用backstretch jquery。Backstretch是一个jQuery插件，它允许你向任何页面添加一个动态调整大小的背景图像。图像将拉伸以适合页面，并随着窗口大小的变化自动调整大小。

下面是一个示例：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17528748

复制

相似问题

问Fixed Div停止滚动整个页面
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fixed Div停止滚动整个页面EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Fixed Div停止滚动整个页面
EN