Question

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 appreciated.

Answer 1

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
}