Question

I’ve looked for an answer and found some but they look to only be for divs with background colours, not background images with corners etc. My example is at (removed)

I want the menu and the “page” to be the same height 100% of the time. No matter which one is larger ie if the page has more content the menu has to stretch and vice versa.

As you can see, the shadows etc for the background images are divs absolutely positioned within the respective divs and then z-indexed lower than the container…

Am I going about this the wrong way? Insight would be very helpful, thanks in advance!

Answer 1

Set the div’s height property to 100% of it’s parent, which will be the body of the document or a containing div. Then simply set margins for the top and bottom.

#menuDiv {
    height: 100%;
    margin: 100px 0 25px 0;
}

Same for the content div. The div’s size properties won’t change for the background image. Although it might be better for you to put both divs in a containing div with both children (menu and content) set to 100% of it’s parent, then set a minimum height on the containing div which is equal to the height of the menu. If you don’t do this and the content div is smaller it’d look ugly.