PROBLEMA Footer in mezzo alla pagina

\_io_/

Utente Attivo
213
17
CPU
Intel Core i5-8600k
Dissipatore
Cooler Master ml240l rgb
Scheda Madre
Gigabyte Aorus z370 Ultra Gaming rev 1
Hard Disk
Wd blue 1tb / Kingstone 128 gb
RAM
HyperX Fury 8 gb
Scheda Video
Nvidia GTX 1060 6gb Gigabyte Aorus Windforce oc
Internet
Wifi
Sistema Operativo
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,062
447
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
213
17
CPU
Intel Core i5-8600k
Dissipatore
Cooler Master ml240l rgb
Scheda Madre
Gigabyte Aorus z370 Ultra Gaming rev 1
Hard Disk
Wd blue 1tb / Kingstone 128 gb
RAM
HyperX Fury 8 gb
Scheda Video
Nvidia GTX 1060 6gb Gigabyte Aorus Windforce oc
Internet
Wifi
Sistema Operativo
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 automaticamente unito:

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,718
756
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
Hard Disk
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
Scheda Video
EVGA GTX670 SC
Monitor
Dell U2412M
Alimentatore
Corsair TX850M
Case
Corsair Graphite 760T
Sistema Operativo
Debian / Kali Linux / Win
Il problema è nelle "position absolute".
Utilizza i flexbox o le grid per definire il layout
 
  • Mi piace
Reactions: Moffetta88

\_io_/

Utente Attivo
213
17
CPU
Intel Core i5-8600k
Dissipatore
Cooler Master ml240l rgb
Scheda Madre
Gigabyte Aorus z370 Ultra Gaming rev 1
Hard Disk
Wd blue 1tb / Kingstone 128 gb
RAM
HyperX Fury 8 gb
Scheda Video
Nvidia GTX 1060 6gb Gigabyte Aorus Windforce oc
Internet
Wifi
Sistema Operativo
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 automaticamente unito:

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,718
756
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
Hard Disk
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
Scheda Video
EVGA GTX670 SC
Monitor
Dell U2412M
Alimentatore
Corsair TX850M
Case
Corsair Graphite 760T
Sistema Operativo
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>
 
  • Mi piace
Reactions: Mursey

Mursey

Moderatore
Staff Forum
3,564
1,611
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.
 
  • Mi piace
Reactions: Moffetta88

Entra

oppure Accedi utilizzando