html - 如何将第二个 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 为 height: 100% - 614px, 但当然你不能那样做。我是否遗漏了什么，或者我是否需要使用 JavaScript/JQuery 来操作这些值？

Answer 1

也许您可以使用包含 614 像素主图像的组合背景图像以及重复多次的底部图像以适应任何合理的浏览器高度(因此您的整体图像可能为 1200 像素或更大)。然后在单个div图像中使用这个大图像作为背景