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

Question

我有一个符合以下要求的布局

• 左侧为图片，右侧为内容。

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

• 用户滚动时图像不移动

• 图像将调整为视口(viewport)高度的 100%，直至其最大高度。 (我不希望图像在尝试比实际更大时变形)

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

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

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

看这里:

http://letteringmusic.com/

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

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

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

谢谢!!

Answer 1

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

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

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