Alcune delle mie pagine Web sono brevi. In quelle pagine, il piè di pagina potrebbe finire nel mezzo della finestra e sotto il piè di pagina è spazio bianco (in bianco). Sembra brutto. Mi piacerebbe che il piè di pagina si trovasse nella parte inferiore della finestra e il corpo del contenuto limitato venisse semplicemente allungato.Mantenere il piè di pagina HTML nella parte inferiore della finestra se la pagina è breve

Tuttavia, se la pagina Web è lunga e devi scorrere per visualizzare il piè di pagina (o tutto il resto), le cose dovrebbero comportarsi normalmente.

Qual è il modo corretto per farlo con i CSS? Ho bisogno di Javascript/jQuery per farlo accadere?

Mi interessa solo IE9 + e le versioni moderne di altri browser. L'altezza del piè di pagina può cambiare anche da pagina a pagina, quindi mi piacerebbe non fare affidamento sull'altezza.

fonte

2012-11-12 at.

Ci si può aiutare mostrando ciò che HTML e CSS è stato utilizzato. –

Perché il tuo footer varia da una pagina all'altra? (Ma poiché lo fa, quanto è significativo il cambio di piè di pagina tra le pagine?) – Souta

Check out this site. Ha un buon tutorial su come farlo con i CSS.

Ho copiato il suo css solo nel caso in cui il sito di Matthew sia stato rimosso.

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:#ff0; 
    padding:10px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; /* Height of the footer */ 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; /* Height of the footer */ 
    background:#6cf; 
}

EDIT

Dal momento che l'altezza del piè di pagina è diverso da una pagina all'altra, si potrebbe ottenere l'altezza del piè di pagina e quindi regolare l'#body padding-bottom con javascript. Ecco un esempio usando jquery.

$(function(){ 
    $('#body').css('padding-bottom', $('#footer').height()+'px'); 
});

fonte

2012-11-12 18:33:56

Sembra che mi chieda di conoscere l'altezza del mio footer, potrebbe essere molto difficile per la mia situazione. –

-2

No, è molto semplice impostare un minimo per l'altezza del corpo.

come questo: altezza minima: 500 px; quindi l'altezza minima è di 500 px.

fonte

2012-11-12 18:06:20 TdeLange

Non conosco l'altezza della finestra e gli altri elementi però. –

-2

utilizza la proprietà min-height, sebbene non del tutto affidabile in quanto alcune versioni precedenti potrebbero non supportarlo. Lancia in qualche javascript se non ti dispiace.

fonte

2012-11-12 18:10:45 geekman

Questo non risolve il mio problema. –

Invia una prova this.

È una copia degli stili utilizzati da Github per mantenere il piè di pagina nella parte inferiore di una pagina.E 'un po' hacky, e richiede di conoscere l'altezza del piè di pagina (che non può funzionare per il vostro caso d'uso)

Markup

<div class="wrapper"> 
<div class="content"><p>Page Content</p></div> 
<div class="footer-push"></div> 
</div> 

<footer> 
    <p>footer-text</p> 
    <img src="http://placekitten.com/100/100" alt="footer image"> 
</footer>

CSS (beh, SCSS)

// our page element 

html { 
height:100%; 
} 

body { 
height:100%; 
} 
.wrapper { 
background:gray; 
min-height:100%; 
height: auto !important; // the magic! 
height:100%; 
margin-bottom:-158px; // the height of our footer + margin 
} 

.footer-push { 
clear:both; 
height:158px; // the height of our footer + margin 
} 

footer { 
background:rgba(#a388a3,0.8); 
margin-top:20px; 
height:138px; 
}

Le cose importanti qui sembrano essere:

altezza Ambito: 100% sul contenente elementi (esp html e body)
Conoscere l'altezza del vostro piè di pagina, e che rappresentano con un elemento di "push"
utilizzando la combinazione di min-heightheight: auto !important e height:100%

Spero che questo aiuti!

fonte

2012-11-12 18:37:49

HTML

<body> 
    <div class="example"> 
     <p>Lorem ipsum dolor sit amet consectetur...</p> 
    </div> 

    <footer> 
     <ul> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ul> 
    </footer> 
</body>

CSS

body { 
    min-height: 100%; 
} 

footer { 
    position: absolute; 
    bottom: 0; 
}

fonte

2015-12-07 22:54:24 georgecodes

Mantenere il piè di pagina HTML nella parte inferiore della finestra se la pagina è breve

risposta

Markup

CSS (beh, SCSS)

Problemi correlati