如何在固定图像下方将第二个div的大小设置为100％的高度？

Question

我使用的是半透明的PNG（由于设计者元素的重叠），并试图在不影响网络性能的前提下实现代表设计的布局。 因此，我有简单的HTML：

<div id="right">
    <div id="welcome"></div>
    <div id="welcomeRepeatingBottom"></div>
</div>

我正在尝试使用CSS，如下所示：

#right {
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 430px;
}

#welcome {
    background-image: url("welcome.png");
    height: 614px;
    width: 430px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#welcomeRepeatingBottom {
    background: url("welcomeBottom.png") repeat-y;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 614px;
    width: 430px;
}

问题是...由于透明度，＃welcomeRepeatingBottom div不能与#welcome div重叠。 我真正想要的是将#welcomeRepeatingBottom div设置为高度：100％-614px，但是您当然不能这样做。 我在这里缺少什么吗？还是需要使用JavaScript / JQuery处理这些值？

Answer 1

也许您可以使用包含614px主图像和底部图像的组合背景图像进行多次操作，以适应任何合理的浏览器高度（因此您的整体图像可能为1200px或更高）。 然后将此大图像用作单个div图像中的背景