需要背景图像滚动但与固定左列和液体右列冲突答案

【问题标题】：Need background image to scroll but conflicts with fixed left column and liquid right column需要背景图像滚动但与固定左列和液体右列冲突
【发布时间】：2011-11-30 17:54:24
【问题描述】：

这里是布局

http://timsegreto.com/cssmock/mock.html

我需要背景图像与右栏中的文本块滚动一致。我尝试了许多不同的方法，但没有成功。任何想法将不胜感激。不确定它是否可能或需要研究什么来使其发挥作用。

谢谢！

【问题讨论】：

这适用于 FF 和 Chrome，但完全破坏了 IE 中的布局。

标签： css background-image css-position liquid-layout

【解决方案1】：

在我看来，您已将定位固定在错误的元素上。尝试固定 #framecontent 位置并将其从 #maincontent 中删除。

编辑这是导致您出现 IE 问题的“怪癖”模式。摆脱：

<!--Force IE6 into quirks mode with this comment tag-->

从您的 html 开始。我确信这应该解决其他跨浏览器问题，但它破坏了固定定位。

【讨论】：

嘿，谢谢，我试过了，它在 FF 和 Chrome 中运行良好，但破坏了 IE 中的布局。有任何想法吗？我已经上传了带有您建议的版本。 timsegreto.com/cssmock/mock.html
@robotmahn：尝试删除 #mainconent 上的溢出属性。
这很好，我刚刚发现IE不再支持固定定位。我正在调查这个。同时，摆脱所有这些溢出属性。

【解决方案2】：

您是否添加了一个额外的 div 并在其上而不是在 body 上设置背景图像？您绝对可以将这个额外的 div 放置在 body 中 top: 0 - 然后它会随着页面滚动......

不确定这是否正是您要寻找的……

【讨论】：

这确实适用于 FF 和 Chrome，但会破坏 IE 中的布局。它将文本区域向下推，并将左列从页面左侧移开。这是包含您的建议的页面。 timsegreto.com/cssmock/mockb.html 有什么黑客的想法吗？