Beste CSS Guru's,

Ik had een probleem met overflow, ik hoop dat jullie me hier mee kunnen en willen helpen.
De bedoeling is dat "container_top" en een "container_bottom" altijd zichtbaar moeten blijven.
In "container_midden" zit een hele lap tekst die moet kunnen scrollen.
Het werkt als ik "container_midden" een height mee geef, maar ik wil dat alles op 100% gaat werken.
Dus moet "container_midden" mee schalen met het scherm, en die andere hun vaste waarde houden.
Ik ben er nu al uren mee aan het stoeien maar ik kom er maar niet uit.
Ziet iemand waar het misgaat..?

Live voorbeeld: klikje
CSS

Code:

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana;
    font-size: 11px;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* CONTAINERS */

#container_top {
    width: 100%;
    height: 100px;
    background-color: #F1F1F1;
    border-bottom: 1px solid #DDD;
}

#container_midden {
    overflow-y: scroll;
}

#container_bottom {
    width: 100%;
    height: 100px;
    background-color: #F1F1F1;
    border-top: 1px solid #DDD;
}
</style>

HTML

Code:

<div id="container_top">&nbsp;</div>

<div id="container_midden">
        <div>
                <div>
                        <h2></h2>
                        <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem   Ipsum has been the industry's standard dummy text ever since the 1500s,   when an unknown printer took a galley of type and scrambled it to make a   type specimen book. It has survived not only five centuries, but also   the leap into electronic typesetting, remaining essentially unchanged.   It was popularised in the 1960s with the release of Letraset sheets   containing Lorem Ipsum passages, and more recently with desktop   publishing software like Aldus PageMaker including versions of Lorem   Ipsum.</p>
                </div>
                <div>
                        <h2></h2>
                        <p>It is a long   established fact that a reader will be distracted by the readable   content of a page when looking at its layout. The point of using Lorem   Ipsum is that it has a more-or-less normal distribution of letters, as   opposed to using 'Content here, content here', making it look like   readable English. Many desktop publishing packages and web page editors   now use Lorem Ipsum as their default model text, and a search for 'lorem   ipsum' will uncover many web sites still in their infancy. Various   versions have evolved over the years, sometimes by accident, sometimes   on purpose (injected humour and the like).</p>
                </div>
        </div>

</div>

<div id="container_bottom">&nbsp;</div>

MVG,
Dave

Beide elementen op fixed zetten.. Top op 0 en bottom op 0

En bij #container-midden overflow-y weglaten.

Super bedankt..!
Ik moest idd beide doen.
Tevens moest ik "#container_midden" een margin-top en margin-bottom mee geven, anders verdwijnt mijn tekst.

Bedankt Patrick Groot en Ofyles2