Tre DIV impilati verticalmente con centro di scorrimento

Question

È possibile impilare verticalmente tre DIV e avere solo il centro medio scorrere verticalmente? Non voglio usare altezze pixel, però, perché i DIV sono all'interno di una finestra di dialogo che è ridimensionabile. Qualcosa di simile a questo (scusa la mia arte ASCII pessimo):

+-----------+ 
| Header | 
+-----------+ 
|   ^| 
|   || 
| Scroll || 
|   || 
|   v| 
+-----------+ 
| Footer | 
+-----------+ 

L'obiettivo è di avere l'intestazione e piè di pagina e fisse e, come la finestra di dialogo cresce, div mezzo sarebbe cresciuto in verticale. Forse sono solo stupido, ma ho combattuto per le ultime ore e non riesco a farlo bene. Probabilmente i tre DIV devono trovarsi all'interno di un "DIV" diverso, ma quando lo faccio e imposto l'altezza al 100%, cresce man mano che aumenta il DIV medio. Di nuovo, probabilmente è qualcosa di sciocco che non sto spiegando. Ho anche provato a usare una tabella inutilmente.

Grazie per qualsiasi aiuto.

Answer 1

Questo dovrebbe funzionare

<div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
</div> 

---

Redatta - Per intestazione posizione fissa e piè di pagina nella finestra di dialogo modale

<div id="wrapper" style="position:relative; overflow:hidden; height:100%; width:100%;"> 
    <div id="header" style="position:absolute; top:0px; left:0px; height:50px;overflow:hidden;"> 
    </div> 
    <div id="content" style="position:absolute; top:50px; bottom:50px; left:0px; overflow:auto;"> 
    </div> 
    <div id="footer" style="position:absolute; bottom:0px; height:50px; left:0px; overflow:hidden;"> 
    </div> 
</div> 

Answer 2

Rivisitare questo per il 2017. Con FlexBox, questo può ora essere fatto senza dover definire esplicitamente l'altezza dell'intestazione e del piè di pagina. Questo funziona, almeno prefissato, in tutti i browser che attualmente hanno una significativa quota di mercato tranne IE < = 10, che ha ancora l'1-5% di share a seconda di chi chiedi. Poiché questo è generalmente un meccanismo di visualizzazione/usabilità e non blocca la funzionalità, l'utilizzo di Flexbox per questo caso dovrebbe almeno lasciare la pagina utilizzabile per gli utenti di browser non supportati.

Tutto quello che dovete fare è avvolgere l'intestazione, contenuti e piè di pagina in un div che ha un'altezza esplicito (per esempio, il corpo o un bambino della stessa altezza 100%), con gli stili:

display: flex; 
    flex: auto; 
    flex-direction: column; 

E applicare lo stile al pannello scorrevole:

overflow-y: auto; 

Se si desidera che il riquadro scorrevole a crescere così tutto lo spazio verticale è utilizzato:

flex-grow: 1; 

e l'intestazione e piè di pagina (necessario per Safari e IE 10):

flex-grow: 0; 

https://jsfiddle.net/ornsk10a/