Volevo creare un sito basato su di un layout monolitico, allineato al centro orizzontalmente, e che abbia una altezza variabile in base ai contenuti che io metto (senza dover ridimensionare pagina per pagina nel codice), e quindi con un altezza del 100%.
Volevo inoltre posizionare uno sticky footer che stia sempre ai piedi della pagina, sia che il contenuto di essa sia ridotto, sia che prenda un bel po di altezza!
Cercando su html.it ho trovato le soluzioni al mio problema, su questo link:
http://css.html.it/guide/lezione/486...o-alla-pagina/
Il risultato è perfetto e non trovo alcun problema (se lo visualizzo in Opera), ma se lo visualizzo in internet explorer il problema è vistoso!
In pratica cosa accade?
In opera, la pagina (vuota) mi prende il 100% dell'altezza del browser (senza scrollbar) e il footer sta perfettamente ai piedi di essa.
In iE, sempre a pagina vuota, invece la pagina mi prende il 100% dell'altezza del browser, ma si crea uno scrollbar, come se la pagina avesse una altezza ben definita.
Vi prego comunque a provare questo codice che vi scrivo, sia su opera (o firefox) e sia su internet explorer, per vedere meglio il mio problema:
HTML:
Css:codice:<body> <div id="container"> <div id="pusher"></div> </div> <div id="footer"></div> </body>
codice:* { vertical-align:baseline; font-weight:inherit; font-family:inherit; font-style:inherit; font-size:100%; border:0 none; outline:0; margin:0; padding:0; height:100%; } body { background-color:#006e42; } #container { background-color:#FFF; width:800px; height:auto !important; height:100%; margin:0 auto -50px; min-height:100%; } #footer, #push { height:50px; width:800px; clear:both; margin:0 auto 0; }
Rispondi quotando
