Limit Child DIV Height to Parent DIV Height With Variable Sibling

Question

I have a container <div> with a specified height, and contained within are two more DIVs, on for introductory copy that will vary (entered by the client), and another to list out various features.

I want the features <div> to automatically fill the remaining space in the parent, and then scroll out the overflow.

How do I do that?

CSS:

#article {
    width:940px;
    height:500px
}

#article-content {
    margin: 20px 0;
}

#article-features {
    height:100%;
    overflow-x: auto;
}

jsFiddle

score 4 · Accepted Answer · edited May 23 '17 at 11:50

No way to do it with HTML4 other than relying on javascript to dynamically change the height of the bottom div based upon calculation (parent_height - sibling_height).

You may look at this: CSS HTML - DIV height fill remaining space

With HTML5 you may use Flexbox to use the remaining space. Note that there are some limitations but it can answer your requirements. See http://caniuse.com/#feat=flexbox.

Limit Child DIV Height to Parent DIV Height With Variable Sibling

1 Answers1