Hi, I am trying to rework a design that previously used multiple background images on one element, via CSS, which wasn't supported in IE. I am trying to instead use three nested DIVs, each with its own background image, which is almost working.

My problem is with the DIV height - I have all the nested elements (from < html > to each < div >) set with height: 100%; and this works fine mostly. However, if the page scrolls, the body and container DIVs are cut off where the viewport ends (http://imgur.com/MbkLX.jpg).

I tried min-height: 100%; on each element, but it doesn't seem to play well with nested DIVs. If I put min-height on the innermost DIV, that DIV works, but its parents still cut off when scrolling (http://imgur.com/16W3A.jpg). If I put min-height on the parent DIV, it isn't inherited, and the children DIV don't fill the page on non-scrolling pages (http://imgur.com/yhaeP.jpg).

Here's my simplified code without any min-height:

CSS:

html {
    height: 100%;
    background: green;
    }
body {
    height: 100%;
    background: red;
    }
#backgroundContainer {
    min-height: 100%;
    background-color: purple;
    }
#shadowContainer {
    height: 100%;
    margin:0 auto 0;
    width:1084px;
    background-color: white;
    }
#contentContainer {
    height: 100%;
    width:1024px;
    margin: 0 auto 0; 
    }

And HTML:

<body>
<div id="backgroundContainer">
<div id="shadowContainer">
<div id="contentContainer">
CONTENT GOES HERE
</div>
</div>
</div>
</body>

Thank you so much in advance for any help. This is driving me crazy.

Jason

  • What doctype are you using? Denis over 6 years ago

1 answer

Tony B 86
0
points

From what I understand you are trying to make a top, middle, and bottom image-setup with the middle image tiling vertically as the middle div expands based on its content. I have done this a few times to fake rounded corners and dropshadows. Here is how I did it.

<div id="middleContainer">
   <div id="topCap">
     all content that is to be within the "wrapped" area should go here
   </div> <!-- end topCap -->
</div> <!-- end middleContainer">
<div id="bottomCap">
</div> <!-- end bottomCap">

#topCap { width:950px; background: url(images/topcap.gif) 0 0 no-repeat; }
#middleContainer { background: url(images/middleImage.gif) 0 0 repeat-y; }
#bottomCap { width:950px; height: 20px;  background: url(images/bottomCap.gif) 0 0 no-repeat; }

This way you have a top and bottom background image which "cap" the vertical container on either side of the main content. The middleContainer div will tile vertically simulating a continuous image which will expand as far as your content allows.

Answered over 6 years ago by Tony B