set the overflow:auto with height 100%

Question

In my page, I have an element which has a height of 100% based on its parent; however, I want this element to auto scroll vertically when necessary. This is my example.

I can not make it.

I have added the following css:

height:100%;
max-height:100%;

In fact, what I want is to make sure that the .content is always inside the .container. Like this:

(BTW, in the above image, I use the max-height:400px which should be avoided since the maximum height of it should be based on the height of .container)

Any ideas?

Answer 1

This is close to the solution you are looking for, though you may need to adjust the padding and such for a more aesthetically pleasing look: http://jsfiddle.net/GJ5yM/

New CSS:

    .content{
        height:100%;
        position: absolute;
    }
    .windowcontent{
        background-color: white;
        padding: 10px;
        max-height:100%;
        position:relative;
        overflow-y:auto;
    }