Fixed height and 100% height in container DIV

Question

I'm trying to get a div to extend to 100% height with the bottom of the scroll bar still visible, when also contained with a fixed height div. Can someone please help me out :)

When using the bellow layout, the vertical scroll bar at the bottom of .div2 falls off the height of the viewpoint, i'm guessing because .div1 is 200px high, pushing div1 to be 100% height + 200px.

Is there a way i can have .div1 be fixed height, and .div2 extend to fill the remaining window height and overflow when that height is reached.

Here is the CSS

html, body {
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        overflow:hidden;
    } 
    .container
    {
        height:100%;
    }
    .leftContent { 
        left:0; 
        top:0; 
        padding:0; 
        width:250px; 
        height:100%; 
        color:white;
        background:blue;
        overflow:hidden;
        border:blue solid;
    } 
    .div1
    {
        height:200px;
        background-color:black;
        border: red solid;
    }
    .div2
    {
        overflow:scroll;
        height:100%;
        border:yellow solid;
    }

And here is the HTML.

<div id="container" class="container">
    <!-- Start Left Column-->
    <div id="leftColumn" class="leftContent">
        <div id="div1" class="div1">
            CONTENT 
        </div>
        <div id="div2" class="div2">
            START START START START START START START START START START START START START START START START 
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            END END END END END END END END END END END END END END END END END END END END END END END END 
        </div>
    </div> 
    <!-- End Left Column-->
</div>

Much appreciated. Thanks

Answer 1

Try this setup for .div2

.div2 {
    overflow:scroll;
    position: absolute;
    top: 200px;
    left: 0;
    bottom: 0;
    width: 250px;
    border:yellow solid;
}

this way you place .div2 right under .div1 with absolute positioning and extend its width and height just like you want (to the width and height of the container)

edit

IE bug can be fixed by wrapping the .div2 into another div -> <div><div class="div2"></div></div>

also try adding this css to your .leftContent declaration

.leftContent {
    /* other declarations */
    position: relative;
    overflow: hidden;
}

Answer 2

Update the following css

.leftContent { 
    left:0; 
    top:0; 
    padding:0; 
    width:250px; 
    height:100%; 
    color:white;
    background:blue;
    overflow:hidden;
    border:blue solid;
    position:relative;
} 
.div1
{
    height:200px;
    background-color:black;
    border: red solid;
    border-width:2px;
}
.div2
{
    border-width:2px;
    position:absolute;
    top:204px;
    bottom:2px;
    overflow-y:scroll;
    right:0px;
    border:yellow solid;
}

Made the left content relative so it becomes a positioned element and is now the containing block for the two divs. This is important to allow div2 to fill the remaining space.

Set the border-width explicitly so I know where to position div2 to not overlap the border of div1.

Basically used absolute positioning to get div2 to fill the remaining space in leftContent along with explicitly specifying the positioning. If I used overflow I would get a scroll bar at the bottom that didn't scroll so to get rid of that I used overflow-y .