BigThink

CSS trick: div contenitore in full-height

Spesso abbiamo la necessità che il div contenitore del nostro sito si estenda per tutta l’altezza della pagina web, anche se il contenuto è minimo. Come fare?

Per questo esempio, è sufficiente il solo div “container” con del testo:

1
2
3
<div id="container">
    <p>Testo</p>
</div>

Aggiungiamo gli stili base e coloriamo il div per visualizzarlo nel nostro esempio:

4
5
6
7
#container{
    height:100%;
    background:red;
}

Tuttavia non basta estendere a 100% l’altezza del div: bisogna impostare anche le dimensioni del body e non solo! Anche dell’html:

8
9
10
11
html,body{
    height:100%;
    margin:0;
}

Se carichiamo la pagina nel nostro browser (sia IE che FF dovrebbero mostrarla uguale), potremmo dichiararci soddisfatti del risultato. Ma non appena inseriamo più testo nel div contenitore, in modo tale che sia necessario scrollare la pagina per vederlo tutto, ecco l’ennesimo problema!

Su IE7 e su FF il “container” rimane alto quanto la parte visualizzata della pagina, ma, quando scrolliamo, questo si ferma senza più allungarsi. Con IE6 il problema non si pone e il div si estende normalmente fino alla fine del testo. Come ovviare a ciò senza scontrarsi col famoso principio del “Modifico di qua, scazza di là”?

Esiste un selettore supportato sia da IE7 che da FF, ma non da IE6: il cosiddetto parent-child selector, la cui sintassi è padre>figlio, che applica la classe a figlio solo quando quest’ultimo è figlio di primo livello di padre. Un hack perfetto che ci evita di specificare un foglio di stile apposito per IE6, perchè tutto ciò che scriveremo in questa regola CSS non verrà considerato da tale browser, che tanto già funziona.
Ecco quindi l’ultimo stile da applicare:

12
13
14
15
body>#container{
    height: auto;
    min-height: 100%;
}

In questo modo potete assicurarvi che, caschi il mondo, il vostro div avrà altezza a tutta pagina.

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Centrare un div dentro un altro div

Centrare un div dentro un altro div

Visto che — statistiche alla mano — i miei post sui CSS sembrano essere apprezzati, continuo su questa strada. Vediamo oggi come centrare gli elementi delle nostre pagine, in particolare i div. Com'è noto, per centrare un testo rispetto al suo contenitore, è sufficiente un semplice text-align:center. Cosa che non funziona con i div. Bisogna infatti ...
CSS trick: div affiancati su FireFox

CSS trick: div affiancati su FireFox

Tutti quei programmatori o designer che sono soliti sviluppare layout tableless per i loro siti sanno bene come sia complicato — e a volte anche frustrante — creare una grafica che sia crossbrowser, perfettamente compatibile con tutti i maggiori browser in circolazione. Spesso ciò che funziona bene con un browser, si vede in modo ...
Uno script jQuery per risolvere i problemi del Box Model

Uno script jQuery per risolvere i problemi del Box Model

Uno dei principali problemi di compatibilità tra browser è l'interpretazione del cosiddetto box model. Secondo gli standard dell W3C, la larghezza (width) o l'altezza (height) assegnata ad un box si riferisce solo all'area di contenuto del box. Il padding, i bordi ed i margini vengono sommati in un secondo momento per arrivare alla larghezza ...
PNG trasparenti su IE6

PNG trasparenti su IE6

Ormai si sa, il browser che peggio supporta gli standard è sempre lui, Internet Explorer. Ancora ancora la versione 7, ma la 6 è davvero scandalosa. Oltre ai vari problemi legati alla visualizzazione dei CSS e via dicendo, è noto il bug delle PNG trasparenti. IE6 si rifiuta semplicemente di mostrarci la trasparenza, sostituendola ...

8 Commenti

  1. adry

    Basta utilizzare position:absolute
    A me funziona così

    8 giugno 2011, 11:51
  2. pippo

    togliete questo articolo!

    4 giugno 2011, 11:05
  3. daniele

    a me non funziona una beneamata cippa.

    25 maggio 2011, 17:17
  4. Per farlo funzionare non usate il selettore parent-child.

    M.

    28 settembre 2010, 12:54
  5. Riccardo

    Ciao,
    non riesco a farlo funzionare :( continua a mostrarmi solo ciò che contiene testo e quel cavolo di div non c’è modo di farlo arrivare fino in fondo (a meno di usare come DOCTYPE HTML 3.0).

    Conosci altri modi per costringere il browser a mostrarmi una finestra alta come tutta la pagina (anche senza contenuto dentro)?

    Grazie

    24 marzo 2010, 03:56
  6. faby

    mmh… non mi funziona ne su FF 3.5 e ne su IE7-8, dovro controllare meglio quelle strane misure che sbadatamente metto e trascuro all’inizio e poi dimentico..

    grazie cmq dell’articolo

    ciao, fabio

    22 dicembre 2009, 21:13

2 Citazioni