Posizionare 3 div

[likioti687]

Ciao a tutti, sto cercando di posizionare queste 3 div. Nella header e footer penso di non avere problemi, ho difficoltà a posizionare il corpo. Ho allegato un'immagine sperando di essere più chiaro : in pratica la div "corpo" deve iniziare sotto la div "header" e poi terminare sopra la div "footer"; l'altezza del div "corpo" si deve adattare alla finestra del browser quindi ho pensato di inserire height:100% ma purtroppo non funziona perchè height:100% prende tutta la pagina.

Immagine.jpg

Codice CSS:

html, body {
width:100%;
height:100%;
}

body {
margin: 0px auto;    
padding: 0px;
top:0;
left:0; 
}

#header {
top:0;
position:fixed;
z-index: -1;
height:50px;
width:100%;
text-align: center;
margin:0 auto;
}

#corpo {
margin:0 auto;
z-index: 1;
width:1000px;
height: 100%;
}

#footer {
bottom:0;
position:fixed;
height:50px;
width:100%;
text-align: center;
margin:0 auto;
}

[KillerWorm]

Ciao, puoi fare in vari modi.
Fammi capire però: dal momento che il div corpo deve ridimensionarsi in base alla finestra, se il contenuto eccede, come dovrebbe comportarsi questo div? Devono apparire delle barre di scorrimento o il contenuto deve essere semplicemente "ritagliato"?

[likioti687]

Ciao, puoi fare in vari modi.
Fammi capire però: dal momento che il div corpo deve ridimensionarsi in base alla finestra, se il contenuto eccede, come dovrebbe comportarsi questo div? Devono apparire delle barre di scorrimento o il contenuto deve essere semplicemente "ritagliato"?

deve apparire la barra di scorrimento verticale, infatti ho saltato un oveflow-y:scroll nel div corpo

[KillerWorm]

Ok, nel corpo prova ad impostare un qualcosa del genere:

position: absolute;
top: 50px;
bottom: 50px;
left: 50%;
width: 1000px;
margin-left: -500px;
overflow-y: auto;
overflow-x: hidden;

[likioti687]

Ok, nel corpo prova ad impostare un qualcosa del genere:

position: absolute;
top: 50px;
bottom: 50px;
left: 50%;
width: 1000px;
margin-left: -500px;
overflow-y: auto;
overflow-x: hidden;

perfetto, funziona! Grazie

https://jsfiddle.net/cj92ufhj/