Fixed height and 100% height in container DIV

Question

Hi, 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 playing with left and bottom attributes of css.

Answer 2

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;
}