How to expand/be-limited-to a fixed parent container height, child parent container?

I have many parent containers. There are many instances of this on a page. They have different heights.

This is the hierarchy of DIVs:

.parent_container
  |-----> .title
  |-----> .content

.parent_container has a fix height and .title takes up some of the height I want .content to take up the rest of the height, but not occupied by .title.

How would I go about doing this?

Currently I have this, but because the parent con开发者_如何学Ctainers are different heights, the 90% doesn't always work well because the .title is always a certain height specified by a H2 style.

Is there a way in CSS to say "content height = parent_height - title height"?

/*just an example...different parent_containers have diff heights)*/
    .parent_container{
    height:530px;
    }

    .content {
    height:90%; /* to make room for title */
    overflow:auto; /*show scrollbars*/
    }

---

There is a way, in this case, to make it work, but you'll have to adjust HTML and CSS.

The HTML change:

.parent_container
|-----> .content
   |-----> .title
   |-----> .scroll_container

The title goes inside the content. You may need to override some styles in .title if .content affects them.

Then, set height of .content to 100%. Now you may have to adjust the CSS on .title and .content to make it work, depending on styling, but it should be doable. Put overflow: auto on .content_scroller and you'll want to remove this same style from the .content container. .content_scroller can then scroll content as needed, and the .content container can be 100% of the height of the .parent_container.

---

there is no current way of calculating with css, although calc() is on the works. there is a big argument saying that doing calculations in css is s parfomance nightmare though. but that's off topic.

one quick fix would be to put .title inside .content, and giving the content a 100% height. saving you the need to calculate anything.

option two is to calculate this using javascript.