How to force scrollbars on child div when parent has relative height?

Question

The problem I'm trying to solve is quite simple, yet I find hard to achieve what I want using my CSS techniques.

What I want is to have some sort of parent div with height set to relative value (like: 100% or 30%). Please do not ask why do I need it, as this is simply a partial and explaining whole layout goes beyond this question.

Inside this parent, I need to have a header h1 followed by child div containing lots of text. And the most important, I need to have scrollbars only inside child div, so that the header will always stay attached to the top of container.

Markup:

<div class="wrapper">
    <h1>Test</h1>
    <div class="text">
        Lorem ipsum (... lots of text)
    </div>
</div>

(NOT)Working fiddle: http://jsfiddle.net/CodeConstructors/BEVSS/

Answer 1

Is this something you want to achieve?

HTML

<div class="wrapper">
     <div class="header">
          HEADER
     </div>
     <div class="content">
          Lorem ipsum (... lots of text)
     </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.wrapper {
    width: 400px;
    height: 100%;
    background-color: #fec;
    margin: auto;
    position: relative;
}
.header {
    height: 40px;
    background-color: green;
    color: #fff;
}
.content {
    position:absolute;
    bottom:0px;
    top: 40px;
    width:100%;
    overflow: auto;
    background-color: #333;
    color: #666;
}