Have child element fill rest of parent element?

Question

I am using the gridster.js library to display a bunch of items in a grid-like manner on the page. This causes all items to have position:absolute and a fixed height/width. Inside each item I want to have a header and a body so it looks like

-------------------
|       header     |
|                  |
-------------------
|                  |
|       body       |
|                  |
|                  |
|                  |
|                  |
--------------------

The problem is that I want the body section to fill up the height of the parent completely and no overflow past it or come up short from it. What happens naturally is the height is exactly the height of its contents, so if theres only 1 word in the body then it will be only a few pixels tall, but if its a lot of content then it overflows past the parent element. What I want is for the body to "fill" up the container so I can add overflow-y:scroll to the body and it will scroll just within the body section.

Is there a way to get this functionality given this scenario?

Example http://jsfiddle.net/np66ojub/

One thing, you mentioned a header but continue to state that you want the body to fill up the whole parent element. Is the header a part of the body section or does the body section have to account for the header but also take up the remaining space? — hungerstar, Apr 07 '15 at 21:53
The header and body are siblings and are both children of the container element. Thats why `height:100%` doesn't work, because body then grows to a height that overflows [height of header] pixels. If there is a lot of content inside body, then it overflows past the bottom of the container when I would rather it use scroll. — Matt Hintzke, Apr 07 '15 at 21:58
Is the height of the header dynamic or do you know it beforehand? — mmgross, Apr 07 '15 at 21:59
Okay, the way you've described it made it sound like you want the body element to take up the full width and height of the parent element. Which it isn't. It's taking up `parent height - header height` correct? — hungerstar, Apr 07 '15 at 22:01
I just created a jsFiddle. Check that out. The red header should technically be a fixed height, but I don't want to use JS to do this at all. The blue body should fill up the the parent so there is no black showing — Matt Hintzke, Apr 07 '15 at 22:04
I just realized this is very similar to the sticky footer problem.. maybe it can be solved that way? — Matt Hintzke, Apr 07 '15 at 22:06
for fixed height header, maybe you can find a solution here: http://stackoverflow.com/questions/15021573/css-get-div-to-take-up-100-body-height-minus-fixed-height-header-and-footer — mmgross, Apr 07 '15 at 22:09

hungerstar · Accepted Answer · 2015-04-08T13:27:50.097

What I do if I need a child element to fill up a parent element full width and full height is to set the position of the parent element to position: relative; so I can apply position: absolute; to the child element. With absolute positioning I can set top, right, bottom, left to 0 and that will stretch the child element out to the boundaries of the parent element.

The example below works for a fixed height header element. Set top to equal the height of the header.

HTML

<div class="card">
    <header>Header</header>
    <div class="body">
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
        Content here. Content here. Content here. Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>
<div class="card">
    <header>Header</header>
    <div class="body">
        Content here.
    </div>
</div>

CSS

.body {
    position: absolute;
    top: 25px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #eee;
    overflow-y: scroll;
}
.card {
    position: relative;
    float: left;
    margin: 5px;
    border: 1px solid #ccc;
    width: 200px;
    height: 200px;
}

jsFiddle: http://jsfiddle.net/vt0gww7v/

I decided to make the header fixed regardless even though it technically wasn't before. After doing that, this approach worked great. Thanks! — Matt Hintzke, Apr 07 '15 at 22:14

Alexey · Answer 2 · 2015-04-07T22:10:55.327

Without the code:

If you set parent to position:relative, all inside elements can use position:absolute and they will be relative to the parent.

So let's denote that your "diagram" is '.block', then:

CSS .page{ position:relative; } .block{ position:absolute; margin:5px; } .block-container{ position:relative; }

.c{
 width:100px;
    height:150px;
    background-color:red;
    top:100px;
}
.a{
 width:70px;
    height:70px;
    background-color:green;
     left:100px;
}
.b{
 width:50px;
    height:60px;
    background-color:blue;
}

HTML

<div class="page">
    <div class="block a">
        <div class="block-container">
           <div class="header">aaaa dsaa as  </div>
           <div class="body">bbbb  sdad </div>
        </div>
    </div>
    <div class="block b">
        <div class="block-container">
           <div class="header">aaaa dsaa as  </div>
           <div class="body">bbbb  sdad </div>
        </div>
    </div>
    <div class="block c">
        <div class="block-container">
           <div class="header">aaaa dsaa as  </div>
           <div class="body">bbbb  sdad </div>
        </div>
    </div>
</div>

Fiddle

Yea, I see. Started doing the fiddle before it was a requirement =( — Alexey, Apr 07 '15 at 22:11

score 0 · Answer 3 · answered Apr 07 '15 at 22:12

If the height of the header block is known, then simply:

.body
{
  max-height: 80%; 
  /* Change to the (100-height) of the header Block. */
}

Otherwise a snippet of jQuery could do the trick:

$(".item").each(function()
{
    var c=$(".item");
    var header=c.find(".header");
    var body=c.find(".body");
    body.css("max-height",c.height()-header.height());
}

Also set overflow-y:auto in the body class

Assumes that each absolutely positioned block has a class of item, each header has a class of header and each body has a class of body.

Have child element fill rest of parent element?

3 Answers3