Un piè di pagina appiccicoso di quanto non si applichi a tutte le pagine

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

  •  20-09-2019
  •  | 
  •  

Domanda

Attualmente sto lavorando a un sito Web che ha bisogno di una sorta di piè di pagina appiccicoso, ma non in tutti i luoghi.

Così, http://www.hostcule.org/newste/

Per la home page, il piè di pagina si attacca automaticamente al fondo, ma per altre pagine, non è simile http://www.hostcule.org/newste/about-us

Come faccio a usare CSS, ad attaccarlo al fondo?

CSS attuale per piè di pagina

#footer{
    clear:both;
    float:left;
    width:100%;
    border-top:solid 1px #d1d0d0;
    background-color:#f1efef;
    margin-bottom:-10px;
}
È stato utile?

Soluzione

Il meglio che abbia mai potuto fare è spingere il piè di pagina dalla parte inferiore della pagina in modo che sia sempre dalla parte inferiore dello schermo. Quello che segue è un esempio di come farlo. La divisione stickyfooterfail non funziona e non so perché ma il bottom La proprietà funziona correttamente se si fa position Per assoluto.

<html>
  <head>
    <style type='text/css'>
body {
height: 100%;
}

#fullheight {
background:#ff0;
position: relative;
min-height: 100%;
}
#stickyfooterfail {
position: relative;
bottom: 0px;
}

#stickyfooter {
background: #f0f;
}
    </style>
  </head>
  <body>
    <div id='fullheight'>
      Some text<br>
      Some text<br>

      Some text<br>
      <div id='stickyfooterfail'>
        Should be at the bottom but isn't
      </div>
    </div>
    <div id='stickyfooter'>
        This is pushed off the bottom by the min-height attribute of #fullheight
    </div>
  </body>
</html>

Se sai che il piè di pagina sarà una dimensione assoluta costante, allora potresti impostare padding-bottom a -(altezza) ad esempio -40px se era alto 40px e quindi impostato bottom di #stickyfooterfail allo stesso valore.

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