当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How do I size a second div to be 100% height underneath a fixed image?

问题描述:

I'm using semi-transparent PNGs (due to the designer's overlapping of elements) and trying to achieve a layout that represents the design while still working well on the web. Thus I have simple HTML:

<div id="right">

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

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

</div>

And I'm trying to use CSS as follows:

#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;

}

The problem is...the #welcomeRepeatingBottom div can't overlap the #welcome div because of the transparency. What I really want is the #welcomeRepeatingBottom div to be height: 100% - 614px, but of course you can't do that. Am I missing something here or do I need to manipulate these values with JavaScript/JQuery?

网友答案:

Maybe you could do it with a combined backgound image that includes the 614px main image plus the bottom image repeated a number of times to accomodate any reasonable browser height (so your overall image might be 1200px or more). Then use this big image as the background in a single div image

分享给朋友:
您可能感兴趣的文章:
随机阅读: