CSS: auto height on containing div, 100% height on background div inside containing div.

Question

The problem, is that I have a content div which stretches its container height-wise (container and content div have auto height).

I want the background container, which is a sister div of the content div to stretch to fill the container. The background container contains divs to break the background into chunks.

The background and container divs have 100% width, the content container doesn't.

HTML:

<div id="container">
<div id="content">
Some long content here ..
</div>
<div id="backgroundContainer">
<div id="someDivToShowABackground"/>
<div id="someDivToShowAnotherBackground"/>
</div>
</div>

CSS:

#container {
    height:auto;
    width:100%;
}

#content {
    height: auto;
    width:500px;
    margin-left:auto;
    margin-right:auto;
}

#backgroundContainer {
    height:100%;??? I want this to be the same height as container, but 100% makes it the height of the viewport.
}`

Answer 1

Somewhere you will need to set a fixed height, instead of using auto everywhere. You will find that if you set a fixed height on your content and/or container, then using auto for things inside it will work.

Also, your boxes will still expand height-wise with more content in, even though you have set a height for it - so don't worry about that :)

#container {
  height:500px;
  min-height:500px;
}

Answer 2

Okay so someone is probably going to slap me for this answer, but I use jQuery to solve all my irritating problems and it turns out that I just used something today to fix a similar issue. Assuming you use jquery:

$("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());

this is untested but I think you can see the concept here. Basically after it is loaded, you can get the height (outerHeight includes padding + borders, innerHeight for the content only). Hope that helps.

Here is how you bind it to the window resize event:

$(window).resize(function() {
  $("#content").sibling("#backgroundContainer").css("height",$("#content").outerHeight());
});

Answer 3

Your question is not clearly. Please, show me what you want your design with image if you can.