CSS piè di pagina appiccicoso non funziona sul dispositivo BlackBerry 8250

StackOverflow https://stackoverflow.com/questions/4415748

Domanda

ho voluto il piè di pagina su un sito per cellulari su cui stavo lavorando ad attaccarsi al fondo della pagina. Ho trovato il CSS Sticky Footer esempio da Ryan Fait e implementato esso. Su tutti i browser che, concettualmente, potrebbe test, ho trovato il piè di pagina di aderire bene al fondo.

E, poi è successo. I clienti si sono lamentati per il piè di pagina in sé gettando tutto il luogo. Su richiesta dolorosamente dettagli, ho scoperto che il problema si è verificato su un solo modello di dispositivi mobili BlackBerry: il modello 8250. Ho tirato fuori una macchina virtuale di Windows, scaricato e installato il BlackBerry 8250 simulatore, e abbastanza sicuro, ho visto il problema.

Per una pagina l'altezza di due schermi BlackBerry, i bastoni piè di pagina al centro della prima schermata, in cima a tutto il resto. Il piè di pagina non si muove durante lo scorrimento, e se si scorre verso il basso per la metà inferiore della pagina, il piè di pagina non è visibile. Rimane fissata al centro dello schermo superiore.

Io posto il codice HTML e CSS per la fine di questa domanda. Se ho potuto ottenere tutti i puntatori o indizi sul motivo per cui questo sta accadendo sul modello 8250 BlackBerry, e non meno importante, come potrebbe essere fissato, sarei molto molto grato.

Grazie! 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
        <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
        <style type="text/css">
            * { margin: 0; padding: 0; }
            html { height: 100%; }
            body { height: 100%; }
            .page { 
                width: 100%; 
                min-height: 100%;
                height: auto !important;
                height: 100%;
                margin: 0 auto -4em;
            }
            .push {
                height: 4em;
            }
            #footer {
                clear: both;
                position: relative;
                z-index: 10;
                height: 4em;
                margin-top: -4em;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="page">
            <!-- lots of other DIVs here for actual content -->
            <div class="push"></div>
        </div>
        <div id="footer">
            <!-- footer content over here -->
        </div>
    </body>
</html>

Ho trovato questo jQuery Sticky Footer hack. Io non sono troppo sicuro di se questo sta per essere qualcosa che la gente suggerirebbero dovrei andare con. Non ho ancora provato, però.

Aggiornamento: Si tratta di un piccolo aggiornamento per dire che ho giocato con il jQuery Sticky Footer hack legata proprio sopra. Non ha funzionato per il dispositivo BlackBerry menzionato, sia.

È stato utile?

Soluzione

Dopo aver provato un paio di cose diverse, mi sono imbattuto nel href="http://www.cssstickyfooter.com/" rel="nofollow"> CSSStickyFooter soluzione 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
        <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
        <title>Another CSS Sticky Footer that works on Black Berry</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            html { 
                height: 100%;
            }

            body {
                height: 100%;
            }

            .page {
                width: 100%;
                min-height: 100%;
            }

            .push {
                padding-bottom: 4em;
                overflow: auto;
            }

            #footer {
                position: relative;
                margin-top: -4em;
                height: 4em;
                clear: both;

                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="page">
            <div id="content">
                <p>Some body content will come here</p>
                <p>And over here as well.</p>
            </div>
            <div class="push"></div>
        </div>
        <div id="footer">
            <p>This is the footer block.</p>
        </div>
    </body>
</html>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top