如何在固定圖像下方將第二個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圖像中的背景