Il piè di pagina CSS non si nasconde

In questa app di esempio ho un’intestazione, un piè di pagina e il contenuto div contiene una tabella che contiene varie statistiche di alcuni giocatori di pallacanestro.

Stavo avendo un problema con il footer quando ho un sacco di voci nel tavolo. Quello che succede è che il footer bloccherà le altre voci come mostrato nell’immagine qui sotto.

inserisci la descrizione dell'immagine qui

Quindi quando clicco nel mezzo il footer scompare come mostrato nella foto qui sotto.

inserisci la descrizione dell'immagine qui

Mi stavo chiedendo se esiste un modo generico in cui posso verificare se ci sono molte voci quindi non mostrare affatto il piè di pagina? o c’è un modo per aggirare questo problema? Si prega di consulenza sono nuovo a web dev e non so trucchi CSS.

Ecco il FIDDLE .

Questo è più o meno ciò che voglio raggiungere, tuttavia non sono sicuro che sia la soluzione migliore, quindi sono aperto a tutti i suggerimenti.

if table contains > x entries { hide footer } else { show footer } 

Penso che la soluzione migliore per te sia quella di rimuovere data-position = “fixed” sul footer come suggerito da altri, ma poi aggiungere anche qualche javascript che imposta l’altezza minima del contenuto div in base all’altezza del dispositivo. In questo modo per un piccolo numero di righe nella tabella, il piè di pagina appare ancora nella parte inferiore dello schermo. Man mano che il numero di file aumenta oltre l’altezza del dispositivo, il piè di pagina viene semplicemente premuto verso il basso rimanendo sotto il tavolo.

Sotto, la funzione SetMinHeight calcola l’altezza minima per il div del contenuto che riempirebbe l’altezza del dispositivo specificato. Quindi lo chiami su pagecontainershow e ogni volta che la finestra si ridimensiona o l’orientamento cambia:

 $(document).on("pagecontainershow", function () { SetMinHeight(); }); $(window).on("resize orientationchange", function () { SetMinHeight(); }); function SetMinHeight() { var screen = $.mobile.getScreenHeight(); var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight(); var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight(); var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(); var content = screen - header - footer - contentCurrent; $(".ui-content").css("min-height", content + "px"); } 

FIDDLE aggiornato

NOTA: per il calcolo, ho dovuto rimuovere lo zoom CSS: #tbcontent {zoom: 80%;}. Se hai davvero bisogno dello zoom, potresti dover regolare il calcolo dell’altezza minima …

Il piè di pagina non dovrebbe essere corretto:

http://jsfiddle.net/fmpeyton/L2vQ3/

Rimuovi data-position='fixed' da questa linea:

Bene, puoi controllare il numero di righe in quella tabella con qualcosa del genere:

 var rowCount = $('#myTable tr').length; 

Quindi aggiungi una condizione come rowCount> 5, puoi aggiungere una class nascosta al piè di pagina.

Una class nascosta può essere qualcosa del genere:

 .hidden { display: none; } 

Quindi in poche parole,

 if(rowCount > x) { $('.footer').addClass('hidden'); } 

prova questo:

 $(document).ready(function(){ var tablerow = $("table tr").length-1; if(tablerow>20) { $(".ui-title").hide(); } else { $(".ui-title").show(); } });