Spingere il piè di pagina in basso quando la pagina non è piena

Question

Sto sviluppando un'app Web mobile. Questa è la struttura principale dall'alto verso il basso: header div, menu div, content div, footer div. L'intestazione, il menu e il piè di pagina sono costanti e le pagine vengono caricate nel div di contenuto utilizzando ajax.

Alcune pagine hanno molti contenuti e riempiono la pagina in modo che sia necessario scorrere. Alcune pagine hanno solo una o due righe di contenuto in modo da lasciare una grande parte vuota (non necessariamente pagine diverse: una pagina mostra ad esempio un elenco di ordini, non puoi avere ordini e puoi avere centinaia ...).

Questo è ciò che voglio ottenere: se la pagina non è piena di contenuti, il piè di pagina sarà nella parte inferiore della pagina. Se la pagina è piena e è necessario scorrere, il piè di pagina sarà immediatamente dopo il contenuto (in modo da scorrere verso il basso la pagina e alla fine si raggiunge il piè di pagina).

Le soluzioni sticky footer non sono buone per me perché non voglio che il piè di pagina si attacchi sempre sul fondo, solo quando la pagina non è piena di contenuti.

Esiste lo stesso? Grazie.

Answer 1

Poi si deve utilizzare javascript per questo - calcolare l'altezza del contenuto - sottrarre dalla altezza della finestra e impostare il margin-top del piè di pagina da quella distanza:

• jsfiddle
• jsfiddle show

HTML

<div id="header" class="header">Header</div> 
<div id="content" class="content">Content</div> 
<div id="footer" class="footer">Footer</div> 

JS (Questo esempio utilizza jQuery, che dovrebbero essere inclusi prima di questo script.)

$('#footer').css('margin-top', 
    $(document).height() 
    - ($('#header').height() + $('#content').height()) 
    - $('#footer').height() 
); 

si può mettere una finestra onResize che chiamano questa funzione in qualsiasi ridimensionamento della finestra.

[modifica blag:]

Ecco il metodo onResize (ma con un min-height e non un margin-top)

Check the JSFiddle

// function to set the height on fly 
function autoHeight() { 
    $('#content').css('min-height', 0); 
    $('#content').css('min-height', (
    $(document).height() 
    - $('#header').height() 
    - $('#footer').height() 
    )); 
} 

// onDocumentReady function bind 
$(document).ready(function() { 
    autoHeight(); 
}); 

// onResize bind of the function 
$(window).resize(function() { 
    autoHeight(); 
}); 

---

Borders, imbottitura e margine

Se si desidera includere bordi e spaziature nel calcolo, è possibile utilizzare outerHeight() anziché height(). In alternativa, outerHeight(true) include anche i margini.

Answer 2

Un CSS Sticky footer dovrebbe risolvere il tuo problema.

Here's an example

che è super facile da installare e utilizzare.Costringerà il piè di pagina verso il basso nella pagina con il contenuto e, se il contenuto non è abbastanza grande da riempire la pagina, resterà nella parte inferiore.

Answer 3

function autoHeight() { 
     var h = $(document).height() - $('body').height(); 
     if (h > 0) { 
      $('#footer').css({ 
       marginTop: h 
      }); 
     } 
    } 
    $(window).on('load', autoHeight); 

Answer 4

Questa soluzione ha funzionato per me. Penso che questo sia perfetto se hai più di un #header e un #footer. Spinge il contenuto verso il basso con il fondo di riempimento se il corpo è più piccolo del viewport.

function autoHeight() { 
    var bodyHeight = $("body").height(); 
    var vwptHeight = $(window).height(); 
    var gap = vwptHeight - bodyHeight; 
    if (vwptHeight > bodyHeight) { 
     $("#content").css("padding-bottom" , gap); 
    } else { 
     $("#content").css("padding-bottom" , "0"); 
    } 
} 
$(document).ready(function() { 
    autoHeight(); 
}); 
$(window).resize(function() { 
    autoHeight(); 
});