Come forzare le barre di scorrimento su div figlio quando il genitore ha altezza relativa?

Question

Il problema che sto cercando di risolvere è abbastanza semplice, tuttavia trovo difficile ottenere ciò che voglio usando le mie tecniche CSS.

Quello che voglio è avere una sorta di genitore div con altezza impostata su valore relativo (come: 100% o 30%). Per favore, non chiedere perché ne ho bisogno, in quanto si tratta semplicemente di una spiegazione parziale e esplicativa che va al di là di questa domanda.

All'interno di questo genitore, ho bisogno di avere un'intestazione h1 seguita da un bambino div contenente molto testo. E il più importante, ho bisogno di avere barre di scorrimento solo all'interno di div figlio, in modo che l'intestazione rimanga sempre attaccata alla parte superiore del contenitore.

Markup:

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

(NOT) violino di lavoro: http://jsfiddle.net/CodeConstructors/BEVSS/

Answer 1

È this qualcosa che si vuole raggiungere?

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

Answer 2

È possibile utilizzare CSS3 proprietà calc(), in questo modo:

html, body { height: 100% } 
.wrapper { 
    height: 30%; 
    overflow: hidden; 
    width: 400px; 
    background-color: yellow; 
} 
h1 {height: 20px} 
.text { 
    overflow: auto; 
    height:-webkit-calc(100% - 20px); 
    height: -moz-cale(100% - 20px); 
    height: -ms-cale(100% - 20px); 
    height: -o-cale(100% - 20px); 
    height: cale(100% - 20px); 
} 

è necessario definire l'altezza del titolo. DEMO. Se si desidera conoscere il metodo di utilizzo calc(), è possibile fare clic su here.