Expanding divs with CSS and no Javascript

Question

Is there a way of making a DIV expand to fill the space left in it's parent container without having to use Javascript to calculate the necessary heights?

<div class="parent" style="height: 100%">
    <div class="child-top">
    </div>

    <div class="child-bottom" style="position: relative;">
    </div>
</div>

.parent is a sidebar that takes up the whole screen, .child-top height may vary depending on the content, and I would like .child-bottom to just take up the rest of the space with position relative so that I can correctly position other elements inside.

UPDATE: I can't use fixed heights in any of the elements. .child-top for obvious reasons, and .child-bottom will have an element with a scrollbar when its height outgrows the parent.

Welcome to the CSS fluid height nightmare... JS is the answer. — David Barker
– David Barker, Commented May 22, 2013 at 16:49
You could run with flexbox... But it's not widely supported yet and considering it's history may never be. You'll have to use javascript for this. — Michael
– Michael, Commented May 22, 2013 at 16:53
You can make it appear to stretch down by styling the parent's background to match the child-bottom's background. What they don't know won't hurt them. — Michael Theriot
– Michael Theriot, Commented May 22, 2013 at 16:55
I can't just use styling because .child-bottom will have a scrollbar when elements inside outgrow it's height. =\ — andersonvom
– andersonvom, Commented May 22, 2013 at 18:57
Why does child-bottom need to take up all the remaining space? — Robert McKee
– Robert McKee, Commented May 22, 2013 at 21:14

Mike Robinson · Accepted Answer · 2013-05-22 17:11:10Z

1

If you're just looking to fill it up, you can use overflow:hidden on the parent to fake it. This comes with some caveats. Anything within the child bottom with a height greater than the child will be hidden, so take it as you will.

http://jsfiddle.net/hBLQR/

Your HTML:

<div class="parent">
    <div class="child-top">
        Hi there
    </div>

    <div class="child-bottom">
        Hi back
    </div>
</div>

And the CSS:

.parent {
    position: absolute; 
    left: 0; 
    right: 200px; 
    top: 0; 
    bottom: 0; 
    overflow: hidden;

}

.child-top { 
    background: green; 
    height: 100px;
    width: 200px;
}

.child-bottom { 
    background: red; 
    height: 100%;    
    width: 200px;
}

answered May 22, 2013 at 17:11

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Expanding divs with CSS and no Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related