CODEWITHSUNDEEP
csshtmlheight
äymm
äymm

Reputation: 411

Make child grow with parent container

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)?

Upvotes: 2

Views: 2796

Answers (4)

George Katsanos
George Katsanos

Reputation: 14195

After some thinking, the answer is pretty clear and straightforward: There is no PURE CSS solution so that a CHILD element can grow depending on its PARENTS contents. In CSS, an element will grow depending on either its OWN contents or on the contents of its CHILDREN . -

The only solutions you could have are two:

1) a Javascript solution. 2) a fake column (faux columns) http://www.alistapart.com/articles/fauxcolumns/

Upvotes: 0

Wex
Wex

Reputation: 15715

Rather than trying to stretch the height of your sidebar, you can make the background behind your sidebar stretch the full length of the page, thus giving the appearance of equal heights. This effectively has the same effect (but note that this only works with fixed-width columns). This trick is known as the Faux Columns technique and a pretty standard way of achieving equal-height columns.

Upvotes: 2

SeeSharp
SeeSharp

Reputation: 2800

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.

Upvotes: 1

Matthew Darnell
Matthew Darnell

Reputation: 4588

If you are trying to maintain a visual column, you could move the styling to a wrapper element that goes around both elements. Actually making the column widths the same can't be done very easily with CSS.

Additionally, you can use pseudo-elements on #logbody to create the column background as well. A height on the pseudo-element will behave more like you might expect the child height to behave.

Upvotes: 0

Related Questions