Nested divs with mixed height mode (% & px) Keep the '%' div fill out space not used by the 'px' div

I want the "blue" container to always be 70px high, while the previous "green" div always max out the height available when the div is resized with javascript.

I've played around with it for a while without finding a proper solution. Help will be a开发者_如何学JAVAppreciated.

As promised, here's my answer.

absolute inside relative positioning is the easiest way to do this.

Live Demo

HTML:

<div id="parent">
    <div id="left">height: 100%</div>
    <div id="right">Content</div>
    <div id="rightFooter">height: 70px</div>
</div>

CSS:

#parent {
    position: relative;
    height: 200px
}
#left, #right, #rightFooter {
    position: absolute
}
#left {
    width: 200px;
    top: 0;
    bottom: 0;
    left: 0
}
#right {
    top: 0;
    right: 0;
    bottom: 70px;
    left: 200px;
    overflow-y: auto
}
#rightFooter {
    height: 70px;
    right: 0;
    bottom: 0;
    left: 200px
}

Would something like this work?

Live Demo

Added an animation of the height so you can see the content extending.

Markup

<div id="parent">
    <div class="left">
        Lefty
    </div>
    <div class="right">
        <div id="rightContent">
            right Content
        </div>
        <div id="rightFooter">
            Right Footer
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

#parent{
    height:300px;
}
.left{
    float: left; 
    width: 33%; 
    background: red;
    height:100%;
}
.right{
    float : left; 
    width: 66%;
    height:100%;
}
#rightContent{
    height: 100%; 
    background: blue;
}
#rightFooter{
    background: yellow; 
    height: 70px; 
    float: right; 
    width: 100%; 
    margin-top: -70px;
}
.clear{
    clear:both;
}

Bah, before the comments come this is a partial solution, the text for the content area will bleed into the footer... looking at a solution for this, or someone else might be able to modify my markup/css to account for that.

Made an example for you here :)

you need to have a left floated div for the left content and a wrapper for the two other right divs, also floated left.

Take a look :)