将空 div 扩展到页面的长度

Question

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

Answer 1

看css固定定位。

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

请参阅此处： http://limpid.nl/lab/css/固定/左侧栏和右侧栏

Answer 2

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

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

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

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