【发布时间】：2014-07-18 17:10:10
【问题描述】：
我希望我尝试的不是不可能的。
让我先解释一下：我有一个响应式设计，在某些情况下需要固定背景（媒体查询块）。有问题的设计是这样的：
http://think-open.at/fileadmin/templates/responsive/content.html
基本上有两种媒体查询：一种用于最大高度，一种用于最小宽度。如果有足够的视口高度，则内容区域中有一个滚动条，并且设计高度是固定的。但是，如果视口不够大，无法显示预定义的高度，height-mediaquery 会从内部 div 中删除滚动条，因此不会有两个嵌套滚动容器（body + div）并将内容区域设置为 height: auto。
如果视口太窄，还有一个响应式媒体查询，但这完美无缺。
现在的问题：当设计切换到整个页面滚动的模式（低于 830 像素高度）时，我想将图像放置在“固定”的右侧容器中，这样它就不会滚动出视口。但随之而来的问题是，我不能真正定位相对于容器 div 的背景，因为“固定”定位了相对于视口的背景图像。我在这里创建了一个 CSS fiddle：
http://dabblet.com/gist/ae5c3598e1465ce0c90e
如果您更改宽度，您会发现问题。我想让图像的右边框与绿色框的右边框对齐。
这有可能吗？我使用 calc() 没有问题，因为如果检测到旧版浏览器，我的 CMS 中会出现使用普通老式设计的条件。
【问题讨论】：
-
我认为您发布了错误的 cssdesk 链接。它是默认站点页面
-
谢谢。我将链接设置为一个工作的 CSS 游乐场。无论如何，这个 cssdesk 一开始就不能正常工作。
标签： css responsive-design fixed background-position background-attachment