相对于设置为 position:fixed 的流体宽度元素定位内容

Question

我的布局具有以下要求

• 左侧是图像，右侧是内容。

• 图像固定在视口的左下角

• 用户滚动时图像不移动

• 图像调整到视口的 100% 高度，直到它的最大高度。 （我不希望图像在试图比实际更大时扭曲）

• 图像保持其纵横比，并根据高度调整其宽度。

• 内容从图像右侧开始，并随着图像随浏览器视口调整大小而移动。

现在，除了最后一个要求之外，我已经设法实现了几乎所有要求。

看看这里：

http://letteringmusic.com/

图像的大小调整得非常好，但我无法让内容漂浮在图像旁边，因为图像是位置固定的，因此不在文档流中。

如果这是获得我想要的结果的唯一方法，我不反对 javascript 解决方案。

有人知道我需要做什么才能完成这项工作吗？

谢谢！！

Answer 1

一个快速的（也许是唯一的）解决方案是在浏览器窗口调整大小时重新设置内容的样式（使用window.onresize 事件）。在该函数中，您应该读取背景图像的宽度：

var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;

并使用#content { position: absolute }。我知道这会带来另一个问题，但我认为你可以绕过它们。这不是最简洁的解决方案，因为必须启用 Javascript（当有人调整此窗口的大小时会触发很多事件），但它应该可以工作。