PROBLEMA Footer in mezzo alla pagina

\_io_/

Utente Attivo
234
17
CPU
Intel Core i5-8600k
Dissipatore
Cooler Master ml240l rgb
Scheda Madre
Gigabyte Aorus z370 Ultra Gaming rev 1
HDD
Wd blue 1tb / Kingstone 128 gb
RAM
HyperX Fury 8 gb
GPU
Nvidia GTX 1060 6gb Gigabyte Aorus Windforce oc
OS
Windows 10
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
 

pabloski

Utente Èlite
2,564
693
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.
 

\_io_/

Utente Attivo
234
17
CPU
Intel Core i5-8600k
Dissipatore
Cooler Master ml240l rgb
Scheda Madre
Gigabyte Aorus z370 Ultra Gaming rev 1
HDD
Wd blue 1tb / Kingstone 128 gb
RAM
HyperX Fury 8 gb
GPU
Nvidia GTX 1060 6gb Gigabyte Aorus Windforce oc
OS
Windows 10
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.

Mando i codici html del footer e il relativo css
Post unito automaticamente:

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%

                }
 

cdtux

Utente Èlite
1,722
764
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
HDD
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
GPU
EVGA GTX670 SC
Monitor
Dell U2412M
PSU
Corsair TX850M
Case
Corsair Graphite 760T
OS
Debian / Kali Linux / Win
Il problema è nelle "position absolute".
Utilizza i flexbox o le grid per definire il layout
 
  • Like
Reactions: Moffetta88

Mursey

Super Moderatore
Staff Forum
Utente Èlite
5,449
3,209
Mi permetto di dire che absolute può anche andare bene ma va impostato il bottom con "0px".
 
  • Like
Reactions: Moffetta88

\_io_/

Utente Attivo
234
17
CPU
Intel Core i5-8600k
Dissipatore
Cooler Master ml240l rgb
Scheda Madre
Gigabyte Aorus z370 Ultra Gaming rev 1
HDD
Wd blue 1tb / Kingstone 128 gb
RAM
HyperX Fury 8 gb
GPU
Nvidia GTX 1060 6gb Gigabyte Aorus Windforce oc
OS
Windows 10
Mi permetto di dire che absolute può anche andare bene ma va impostato il bottom con "0px".
com bottom = 0px; è peggio, me lo manda in mezzo alla pagina anche sulla risoluzione "ideale" per cui è stato creatp
Post unito automaticamente:

Il problema è nelle "position absolute".
Utilizza i flexbox o le grid per definire il layout
Con le flexbox mi tira in fondo alla pagina anche l'header
 

cdtux

Utente Èlite
1,722
764
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
HDD
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
GPU
EVGA GTX670 SC
Monitor
Dell U2412M
PSU
Corsair TX850M
Case
Corsair Graphite 760T
OS
Debian / Kali Linux / Win
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>
 
  • Like
Reactions: Mursey

Mursey

Super Moderatore
Staff Forum
Utente Èlite
5,449
3,209
com bottom = 0px; è peggio, me lo manda in mezzo alla pagina anche sulla risoluzione "ideale" per cui è stato creatp
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.
 
  • Like
Reactions: Moffetta88

Entra

oppure Accedi utilizzando

Hot: PS5 VS XBOX X/S?

  • Playstation 5

    Voti: 286 63.3%
  • XBOX Series X/S

    Voti: 166 36.7%

Discussioni Simili