Question

我有两个设置为100像素的div，绝对位于页面的左右两侧。我在它们之间有一个内容部分。当您从较大页面的顶部滚动到底部时，我希望图像与页面一起滚动。我的网站有七个不同大小的页面，我正在尝试使用CSS来完成这项工作。任何人都可以帮助我吗？

Answer 1

看看css固定位置。

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

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

Answer 2

Here是一个可以解决您问题的示例。

它使用background-attachment：fixed;但您也可以使用位置：固定属性，具体取决于您希望如何将图像静态放置在元素中或滚动页面。背景选项的问题是它需要你为它设计一个背景图像，但它会起作用。

编辑：Here是关于固定定位和跨浏览器兼容性的优秀文章。

Answer 3

<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的代码。它们完全没有任何东西，只有背景图像，我想滚动页面的长度。

将空div扩展为页面的长度

3 个答案: