Make div take up rest of space (height)?

Question

HTML

<div class="container">
    <div class="header">
        <span>
            <span>First</span>
        </span>
        <span>
            <span>Second</span>
        </span>
        <span class="active">
           <span>Thrid</span>
        </span>
    </div>
    <div class="body">
        <div class="Control1">
            Content!
        </div>
    </div>
</div>

CSS

.container
{
    height: 300px;
    border: black 1px solid;
}

.container > .header
{
    background: grey;
}
.container > .header > span
{
    display: inline-block;
    padding: 10px;
}
.container > .header > .active
{
    background: black;
    color: white;
}

.container > .body
{
    height: 100%;
    overflow: auto;
    background: lightgrey;
}

http://jsfiddle.net/ytg8S/

My problem here is that i have the container div thats 300 px in height, and then i have the header thats of unknown height (depending on number of items on it and the screen size it could be more than one row.) how do i make the .body take up the rest of the space and show a scroll if it has more content than there is space for??

my first idea was to fiddle with absolute positioning but that didn't work when i had more than one row of .header items..

I can't change the html as that is generated by a third party component (well i could but it would be a lot of work) and i would rather avoid using javascript if i can..

try `overflow-y: scroll;` inside `.container > .body` – KBN Feb 07 '13 at 12:15 — KBN, Feb 07 '13 at 12:15
do you want scroll bar within header??? – Kingk Feb 07 '13 at 12:16 — Kingk, Feb 07 '13 at 12:16
@Kingk the header should always be visible.. – Peter Feb 07 '13 at 12:21 — Peter, Feb 07 '13 at 12:21

score 0 · Answer 1 · answered Feb 07 '13 at 12:16

0

If I understand your question correctly then I think this will do what you want:

container > .body
{
    height: 100%;
    max-height:100%;
    overflow: auto;
    background: lightgrey;
}

answered Feb 07 '13 at 12:16

Billy Moat

20,792
7
45
37

this doesn't work, as you would need both `body` and `html`to have `height:100%` for this to work. And even with that, this has problems when the content of the page exceeds the screen height. – Salvatorelab Feb 07 '13 at 12:23
@TheBronx - If I understand correctly the OP is working within a container with a height of 300px so he's not using the full height of the page. Taking that into account my solution of adding a max-height of 100% of the .body DIV works I think. – Billy Moat Feb 07 '13 at 12:25
1

sorry, I didn't understand the question. You are right, he is trying to fill the remaining space of a fixed height div. – Salvatorelab Feb 07 '13 at 12:29
@BillyMoat look at the following there i have added your max-height: 100%; and im sorry to say it didn't change any thing. http://jsfiddle.net/ytg8S/3/ – Peter Feb 07 '13 at 12:42

score 0 · Answer 2 · answered Feb 07 '13 at 12:59

try this.. hope this helps

   .container
{
    height: 300px;
    border: black 1px solid;
    background: #D3D3D3;
}

.container > .header
{
    height:auto;
    background: grey;
    max-height: 200px;
    overflow: auto; 
}
.container > .header > span
{
    display: inline-block;
    padding: 10px;
}
.container > .header > .active
{
    background: black;
    color: white;
}

.container > .body
{
    height: auto;
    max-height: 100px;
    overflow: auto;
    background: lightgrey;
}

Make div take up rest of space (height)?

2 Answers2