扩展一个空白div的页面长度

问题描述：

我有两个div设置为100像素绝对位于页面的左侧和右侧。我有一个内容部分保证他们之间。当您从较大页面的顶部到底部滚动时，我希望图像随页面滚动。在我的网站中有七个不同大小的页面，我正在尝试使用CSS来完成这项工作。谁能帮我？扩展一个空白div的页面长度

你是说你想让图像保持原位而不移动？另外，你们可以分享CSS中的问题以及显示你想克服的问题的基本页面吗？ ~~ http://stackoverflow.com/questions/how-to-ask – jcolebrand 2010-11-16 23:19:56

答

看看css的定位。

position:fixed; top:0px; left:0px;

在这里看到：http://limpid.nl/lab/css/fixed/left-sidebar-and-right-sidebar

应该指出的是，position：fixed在IE6中不被支持，并且不适用于像iPhone这样的移动设备（在这些情况发生的情况下问题）。 – RussellUresti 2010-11-16 23:28:25

谢谢，所提供的链接有更好的方式来处理手持设备等。 – superUntitled 2010-11-16 23:32:51

答

Here是可以解决你的问题的例子。

它使用background-attachment：fixed;但是您也可以使用position：fixed attibute，具体取决于您希望图像在元素中是静态还是滚动页面。后台选项的问题是它需要你为它设计一个背景图片，但它会起作用。

编辑：Here是一个关于固定定位和跨浏览器兼容性的优秀帖子。

我有他们在一个div中，我设置的属性固定，但我已定位div的位置：绝对;属性。我需要外部div来匹配内容div的高度，然后根据页面的长度，让背景图片随页面一起滚动。 – 2010-11-18 03:59:48

我看到你的问题，这些东西可能有点讨厌。如果你可以发布你的div和css的简化版本，这将有助于提供一个解决方案=）在此期间，我阅读了关于这个问题的一个伟大的职位，并已将其添加到我的答案的编辑部分。 – JonVD 2010-11-18 13:29:49

答

<div id="image1"> 
</div> 

<div id="image2"> 
</div> 

#image1 { 
    position: absolute; 
    width: 100px; 
    top: 0; 
    left: 0; 
    padding: 0; 
    margin: 0; 
    background-image: url(../media/warlock.jpg); 
    min-height: 100%; 
    height: 100%; 
    background-position: center; 
    background-attachment: scroll; 
} 

#image2 { 
    position: absolute; 
    width: 100px; 
    top: 0px; 
    right: 0px; 
    padding: 0; 
    background-image: url(../media/paladin.jpg); 
    min-height: 100%; 
    height: 100%; 
    background-position: center; 
    background-attachment: scroll; 
    background-repeat: repeat; 
}

这基本上是双方的代码。他们完全没有任何东西，但我想滚动页面的长度的背景图像。

扩展一个空白div的页面长度

相关推荐