css - 扩展一个空的 div 页面的长度

Question

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

Answer 1

看css固定定位。

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

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

Answer 2

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

Answer 3

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

它使用背景附件：固定；但您也可以使用 position:fixed 属性，具体取决于您希望图像在元素中静态或随页面滚动的方式。背景选项的问题是它需要您为其设计背景图像，但它会起作用。

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