PROBLEMA Footer in mezzo alla pagina

Pubblicità
\_io_/

\_io_/

Utente Attivo
Messaggi
234
Reazioni
17
Punteggio
36
Di recente sto sviluppando un piccolo sito con html e css, solo che, una volta creato un header e un footer comune, in alcune pagine, specialmente con la visualizzazione mobile il footer si trova in mezzo alla pagina.

Ho cercato su internet, ma non va nulla.

Qualcuno sa cosa posso fare per bloccare il footer in fondo alla pagina, a seconda della grandezza di quest'ultima??

Grazie in anticipo
 
Mi sa che c'è qualche brutto errore nel html e/o nel posizionamento del footer. Cioè già se metti una sfilza di div, uno sotto l'altro è difficile che quello alla fine finisce per essere visualizzato a metà pagina. Può significare che c'è un problema di chiusura/apertura dei tag ( che spesso fa scazzare il layout ) o il css è fatto malaccio.

Difficile da dire senza vedere il codice html e css.
 
pabloski ha detto:
Mi sa che c'è qualche brutto errore nel html e/o nel posizionamento del footer. Cioè già se metti una sfilza di div, uno sotto l'altro è difficile che quello alla fine finisce per essere visualizzato a metà pagina. Può significare che c'è un problema di chiusura/apertura dei tag ( che spesso fa scazzare il layout ) o il css è fatto malaccio.

Difficile da dire senza vedere il codice html e css.
Clicca per espandere...

Mando i codici html del footer e il relativo css
--- i due messaggi sono stati uniti ---
HTML: 
<div id="Footer">
        <div id="SocialBlock" align="center">
            Link dei social
        </div>

        <div id="Copyright" align="center">
            Copyright
        </div>
        
</div>

CSS: 
#Footer            {
        
                    background-color: #2e2e2e;
                    position: absolute;
                    width: 100%;
                    height: 350px;   
                    margin-left:-8px;
                    margin-top: 100%;
        
                }
#SocialBlock    {

                    display: inline-block;
                    color: white;
                    position: absolute;
                    top: 95px;
                }

#Social         {
                    
                    width: 3%;
                    cursor: pointer;
                    margin: 15px;
        
                }

#Copyright      {

                    font-size: 1.3rem;
                    display: inline-block;
                    position: absolute;
                    top: 250px;
                    left: 27%

                }
 
Mursey ha detto:
Mi permetto di dire che absolute può anche andare bene ma va impostato il bottom con "0px".
Clicca per espandere...
com bottom = 0px; è peggio, me lo manda in mezzo alla pagina anche sulla risoluzione "ideale" per cui è stato creatp
--- i due messaggi sono stati uniti ---
cdtux ha detto:
Il problema è nelle "position absolute".
Utilizza i flexbox o le grid per definire il layout
Clicca per espandere...
Con le flexbox mi tira in fondo alla pagina anche l'header
 
Ecco un esempio di layout composto da 3 blocchi centrati (header, main, footer) utilizzando i flexbox.
Il footer è sticky, ovvero rimane nel fondo della pagina in ogni circostanza.

HTML: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      *,
      html {
        margin: 0;
        padding: 0;
      }
      body {
        height: 100vh;
        display: flex;
        flex-direction: column;
      }
      main {
        flex: 1 0 auto;
      }
      footer {
        color: white;
        flex-shrink: 0;
        background-color: #2e2e2e;
        height: 350px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
      }
      footer #SocialBlock {
        padding: 1rem;
      }
      footer #Copyright {
        font-size: 1.3rem;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <header>
      HEADER
    </header>
    <main>
      MAIN
    </main>
    <footer>
      <div id="SocialBlock" align="center">
        Link dei social
      </div>

      <div id="Copyright" align="center">
        Copyright
      </div>
    </footer>
  </body>
</html>
 
\_io_/ ha detto:
com bottom = 0px; è peggio, me lo manda in mezzo alla pagina anche sulla risoluzione "ideale" per cui è stato creatp
Clicca per espandere...
Io con Chome aggiungendo bottom: 0px al solo #Footer lo vedo bene in ogni dispositivo.
Con bene intendo che rimane agganciato in basso, per il resto è un footer gigante ed il suo contenuto mal posizionato.
 
Pubblicità
Pubblicità
Indietro
Top