Come fare per allungare l'ultimo div a riempire lo schermo?

Ho un sito che sto cercando di costruire e ho raggiunto un piccolo intoppo che mi sta facendo impazzire. In sostanza, nelle pagine senza contenuti sufficienti per riempire il viewport, voglio che l'ultimo div (il mio piè di pagina) occupi il resto del viewport, ma al momento viene interrotto.Come fare per allungare l'ultimo div a riempire lo schermo?

mio HTML simile a questa:

<body> 
    <div id="header"> </div> 
    <div id="subNav"> </div> 
    <div id="content"> </div> 
    <div id="footer"> </div> 
</body>

Ho provato ad utilizzare html, body, footer { height:100%; } ma che crea molto più spazio del necessario, in sostanza, una lunghezza schermo intero di contenuti vuoto nel piè di pagina.

Come si ottiene il footer per riempire il resto dello schermo senza aggiungere una barra di scorrimento?

Grazie in anticipo, Un codificatore frustrato.

fonte

2010-03-12 Conor

Sono abbastanza sicuro che l'unico modo per fare ciò è calcolare il resto assoluto in altezza.

cioè, con jQuery

$('#footer').height(($(window).height() - $('#header').height() - $('#subNav').height() - $('#content').height()) + "px");

Si consiglia di fare questo sulla finestra di ridimensionamento per consentire una finestra di ridimensionamento in modo dinamico.

$(window).resize(function(){...});

fonte

2010-03-12 19:49:56

Sì, non può essere fatto bene senza javascript. – gingerbreadboy

Un metodo che utilizza la posizione superiore #content relativa al documento e quindi calcola la differenza rispetto all'altezza del documento sarà un po 'più pulito? –

Se non si vuole andare via jQuery, la versione del povero di questo sta dando #content un min-height che farlo funzionare nella maggior parte dei display, e/o dando il vostro sacco footer di imbottitura sul fondo. In alcuni casi potrebbe innescare una barra di scorrimento, poiché stai solo controllando quanto può essere breve la pagina.

(Oppure si può semplicemente accettarlo come una limitazione del mezzo. Stack Overflow, per esempio, solo ha il suo galleggiante piè sopra spazio bianco se la pagina è troppo breve.)

fonte

2010-03-12 20:05:56

So che questo è di 10 mesi di ritardo quindi probabilmente hai già capito qualcosa. Ma ecco una soluzione che uso.

(scusate, per qualche motivo non riesco a far funzionare correttamente il codice per mostrarvi il codice.) Fondamentalmente avvolgere un div chiamato "contenitore", o qualcosa del genere, attorno a tutte le altre div tranne il piè di pagina. Il div footer sarà appena sotto il contenitore div con tutti gli altri all'interno del contenitore.

Imposta il colore dello sfondo del tuo stile del corpo per essere quello che vuoi che il tuo riempimento sia nella parte inferiore. Quindi il colore di sfondo del contenitore div sarebbe quello che era il colore di sfondo del tuo corpo. Quindi tutto ciò che si trova sul piè di pagina sarà ciò che si desidera sia il colore di sfondo e quindi il colore di sfondo del corpo riempie il resto della pagina.

fonte

2011-02-04 15:45:06 astonishedman

Come fare per allungare l'ultimo div a riempire lo schermo?

risposta

Problemi correlati