Question

So, I have 2 Containers:

+———–+
|               |
+—+        |
|     |         |
|     |         |
|     |         |
|     |         |
+—+——+

The parent hast an variable amount of content, so the child should grow to always go down to the bottom.

#logbody {
font-family: calibri;
width: 100%;
height: 85%;
background-color: #DFDFDF;
text-align: center;
padding-top: 16;
overflow: auto;
}

#menu {
float: left;
font-family: calibri;
width: 15%;
height: 100%;
background-color: #F8AA3C;
}

logbody is the parent, menu the child.
When the parent contains a lot of stuff it’ll look like this:

+———–+
|               |
+—+        |
|     |         |
|     |         |
|     |         |
|     |         |
+—+        |
|               |
+———–+

And that’s not what I want, the child should grow along. As you can see the parent is not at a 100% height since there’s another container above the parent. Actually, there’s one big continer, which is 100%. The first child is some kind of header with 12%, followed by the header, then the logbody which contains another child (the menu).

<div id=container> //100%
    <div id=header></div> //12%
    <div id=logbody> //85%
        <div id=menu></div>
    </div>
</div>

I know, this ain’t proper code, it’S just to show the structure. And yes, the remaining 3% are on purpose.

So, is there any pure-CSS solution to adapt the height of the child (menu)?

Answer 1

I’ve added a couple of lines to your CSS and it seems to work if I’ve understood the question correctly.

#logbody {
font-family: calibri;
width: 100%;
height: 85%;
background-color: #DFDFDF;
text-align: center;
padding-top: 16;
overflow: hidden; /*This is new*/
position: relative; /*As is this*/
}

#menu {
float: left;
font-family: calibri;
width: 15%;
height: 100%;
background-color: #F8AA3C;
position: absolute; /*This is new*/
}​

Note, this approach won’t expand the parent if the child’s height exceeds that of its parent what with the overflow being hidden and all.