Posizione del piè di pagina CSS attaccarsi al fondo del browser?

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

Domanda

Ho un problema con il mio sito http://artygirl.co.uk/pixie/about/ Non riesco a convincere il piè di pagina ad attaccarsi automaticamente alla parte inferiore del browser e mostrare il resto del mio sfondo. C'è una soluzione migliore che usare la posizione: fissa o assoluta?

Penso che ci siano forse altri stili che superano alcuni test che faccio a Firebug.

Grazie per il tuo aiuto saluti Judi

È stato utile?

Soluzione

Questo è sempre un po 'difficile, potresti aumentare il min-height Della area dei contenuti, ma anche allora se qualcuno ha uno schermo davvero grande vedresti la stessa cosa.

Potresti usare un po 'di JavaScript per aumentare il min-height Se qualcuno ha un enorme punto di vista, ma è ancora meno che elegante. Non sono sicuro che ci sia una soluzione solo CSS a questo.

Se vuoi provare quanto sopra il codice ho appena pubblicato qui: Il rilevamento della presenza di barra di scorrimento con jQuery è ancora difficile? può essere utile per te.

Altri suggerimenti

CSS:

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

Html:

<div class="podbar">
    Put your footer here
</div>

Questo creerà un appiccicoso che apparirà sempre nella parte inferiore della pagina e sovrapponerà tutto. Basta aggiungere un margine/imbottitura extra sul fondo dei Div del contenitore principale uguale all'altezza del piè di pagina +5px Quindi non si sovrappone ai tuoi contenuti.

Funziona praticamente in tutti i browser che ho testato.

Ho usato la tecnica in questo articolo prima: Layout CSS: altezza al 100% con intestazione e piè di pagina. Richiede un markup extra nel tuo HTML.

Impostare l'altezza di HTML e del corpo al 100%, inserire una diviette di contenitore con altezza minima al 100% e posizione relativa e nidificare il piè di pagina con posizione: assoluto, in basso: 0;

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

<body>
  <div id="container">
    <div id="footer"></div>
  </div>
</body>
</html>

Qui hai un esempio e una spiegazione http://ryanfait.com/sticky-footer/

Potresti impostare un min-height Su #content. Ciò non risolverà il piè di pagina sul fondo del browser in modo specifico, ma assicurerà di poter sempre vedere una certa quantità di sfondo.

In alternativa, usando JavaScript, è possibile determinare l'altezza della finestra del browser e quindi calcolare il min-height per #content, e applicarlo usando JavaScript. Ciò garantirebbe che il piè di pagina sia sempre nel posto corretto.

L'ho capito. HTML aveva una proprietà CSS per lo sfondo che diceva il colore bianco.

Preferisco sempre i piè di pagina saggi di pagina a causa del contenuto variabile nelle pagine. Uso un margine superiore di 5em per i miei piè di pagina. Molto spesso no, conosciamo l'altezza del contenuto che può verificarsi alle pagine.

Se usi il Bussola Biblioteca per Sass, c'è anche un'altra opzione. Puoi usare la bussola mixin appiccicoso (Demo). Richiede che il piè di pagina sia al piano di altezza e che il tuo HTML abbia una certa struttura generale.

Non usare Posizione: assoluto uso Posizione: relativo invece.

.footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

Posizione: assoluto Lo attaccerà alla parte inferiore dello schermo mentre la posizione relativa non ignorerà altri div, quindi rimarrà nella parte inferiore dell'intera pagina.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top