[HTML] header footer body 100% della finestra

[Demetriu]

Ciao a tutti, sono 2gg che sto impazzendo, vi spiego il risultato che voglio avere:

Header con logo e menù orizontale ad altezza fissa 100px
body con il contenuto
footer ad altezza fissa 50px sempre posizionato in basso

Vorrei che il totale header+body+footer sia il 100% della finestra e che quindi non appaia lo scroll alla finestra ma che siano sempre visibili header e footer riducendo solo il body. ma il body ha un altezza minima dove il quale far apparire lo scroll alla finestra

Se lavoro con margin e padding sul body questo mi va a finire sopra i bottoni dell'header e quindi non sono piu cliccabili.

il risultato piu vicino l'ho avuto con:
#header {
height: 100px;
}

#body{
height: 100%;
min-height: 400px;
}

#footer {
height: 50px;
}

ma così ovviamente la pagina sarà alta quanto la finestra +150px.

Domanda: come faccio a dire che il body deve essere alto il 100% -150px con un altezza minima di 400px?

Grazie.

[wingman87]

Una soluzione è mettere il footer in posizione fixed in basso

#footer {
height: 50px;
position: fixed;
bottom: 0;
}

[Tuvok-LuR-]

un esempio usando il posizionamento fixed:
http://codepen.io/anon/pen/KazbI

per fare esattamente quello che vuoi tu devi usare un po' di javascript per ridimensionare il div con il contenuto della pagina in base all'altezza della finestra ed usare il css overflow-y: scroll
http://codepen.io/anon/pen/yzFrA

[Demetriu]

Originariamente inviato da wingman87

Una soluzione è mettere il footer in posizione fixed in basso

#footer {
height: 50px;
position: fixed;
bottom: 0;
}

così il footer è agganciato alla finestra e in caso la finestra sia piu piccola di 400px questo fa a finire sopra al body, quindi non va bene

penso che sono costretto allo javascript allora...

[wingman87]

Per questo problema basta che il body non abbia contenuto negli ultimi 50px, ad esempio mettendoci un padding. O forse non ho capito cosa intendi...

EDIT: in effetti l'esempio di Tuvok-LuR- tiene conto di questo.. confermo che non ho capito cosa intendi

[OoZic]

http://getbootstrap.com/getting-started/#examples

http://getbootstrap.com/examples/sticky-footer/

Ti consiglio vivamente di usare un framework tipo bootstrap.
Fare il css da zero spesso significa:
- perdere tempo
- commettere errori
- impazzire per trovare soluzioni a problemi che altri hanno già risolto
- impazzire per rendere compatibile con i vari browser (e anche tablet/smartphones) il tuo layout

[Demetriu]

Originariamente inviato da wingman87

Per questo problema basta che il body non abbia contenuto negli ultimi 50px, ad esempio mettendoci un padding. O forse non ho capito cosa intendi...

EDIT: in effetti l'esempio di Tuvok-LuR- tiene conto di questo.. confermo che non ho capito cosa intendi

Lo scroll appare sul container (che ha altezza minima), ma il footer rimane sempre in vista. io voglio che il footer rimanga sotto al container quando la finestra è inferiore all'altezza minima.

il footer deve essere in fondo alla pagina, non in fondo alla finestra del browser (cioè sempre in vista)

[Demetriu]

Originariamente inviato da OoZic

http://getbootstrap.com/getting-started/#examples

http://getbootstrap.com/examples/sticky-footer/

Ti consiglio vivamente di usare un framework tipo bootstrap.
Fare il css da zero spesso significa:
- perdere tempo
- commettere errori
- impazzire per trovare soluzioni a problemi che altri hanno già risolto
- impazzire per rendere compatibile con i vari browser (e anche tablet/smartphones) il tuo layout

è proprio il secondo che volevo grazie mille.