Piè di pagina che dovrebbe essere sotto tutto il contenuto, ma non risolto

Ho un sito con due piè di pagina. Uno si è comportato molto bene come un footer 'fisso' che è sempre visibile in fondo alla pagina. L'altro piè di pagina è più grande e dovrebbe essere inferiore a tutti i contenuti, appare solo quando si scorre tutto il contenuto (se il contenuto è più grande della pagina, non dovrebbe essere visibile finché non si scorre verso il basso). Tuttavia, ha bisogno di essere appiccicoso in modo che se c'è poco contenuto non sale e lascia un vuoto bianco imbarazzante.Piè di pagina che dovrebbe essere sotto tutto il contenuto, ma non risolto

In questo momento è visualizzato nel mezzo della pagina. :(Aiuto?

html, body { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
#PageContainer { 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
header { 
 
\t width: 100%; 
 
} 
 

 
#Content { 
 
\t position: relative; 
 
\t background-image:url(Images/Golf%20Ball%20Texture.jpg); 
 
\t background-repeat:repeat; 
 
\t background-size: 150px auto; 
 
\t width: 100%; 
 
\t padding-left: 20px; 
 
\t margin-left: -20px; 
 
\t padding-right: 20px; 
 
\t margin-right: -20px; 
 
\t min-height: 90%; 
 
} 
 

 
footer { 
 
\t width: 100%; 
 
} 
 

 
#MovingFooter { 
 
\t clear: both; 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t background-color: #FFD600; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t font-size: .9em; 
 
} 
 

 
#StickyFooter { 
 
\t position: fixed; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t background-color: #787878; 
 
\t padding-left: 20px; 
 
\t margin-left: -20px; 
 
\t padding-right: 20px; 
 
\t margin-right: -20px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 

 
<meta charset="UTF-8"> 
 
<link rel="Stylesheet" href="../style.css" type="text/css" /> 
 
<link rel="shortcut icon" href="Images/Logo%20Favicon.ico"> 
 

 

 
<title>Your Personality</title> 
 

 

 

 
</head> 
 

 
<div id="PageContainer"> 
 
<header> 
 
</header> 
 

 
<body> 
 

 
<div id="Content"> 
 
</div> <!--id="Content"--> 
 

 

 

 

 
<div id="MovingFooter"> 
 
<h2>Company Philosophy</h2> 
 
<p>Footer content</p> 
 
</div> <!--class="FooterThirds" --> 
 

 

 
</div> <!-- class="ThirdsContainer" --> 
 
</div> <!-- id="MovingFooter" --> 
 

 
<div id="StickyFooter"> 
 
<p class="FancyFinePrint">&copy; Copyright 2014 by <a href="http://www.geneticgolf.com">Company Name</a>. All Rights Reserved.</p> 
 
<div id="FooterPartners"> 
 
<p class="FooterPartnerText">Proud Partners With:</p> 
 
</div> <!-- id="FooterPartners" --> 
 
</div> <!-- id="StickyFooter" --> 
 
</div> <!-- id="PageContainer" --> 
 

 
</body>

fonte

2015-06-01 Liz

http://jsbin.com/kevoba/1/edit "metà della pagina" ?? Probabilmente non so cosa significa * mezzo *? –

Ecco qua: https://css-tricks.com/snippets/css/sticky-footer/ –

È quello che vuoi? https://jsfiddle.net/lmgonzalves/c5vL77oz/ – lmgonzalves

Siete alla ricerca di una tecnica come FooterStickAlt, che mantiene il piè di pagina sotto il contenuto, ma anche mantiene il piè di pagina in fondo della finestra, se l'isn contenuti

In parole semplici, tutto tranne il piè di pagina viene incapsulato in un elemento di contenimento che ha min-height: 100% e quindi il piè di pagina è tirato su con un margine superiore negativo.Questa particolare tecnica richiede conoscendo l'altezza del tuo appiccicoso piè di pagina.

https://css-tricks.com/snippets/css/sticky-footer/ e http://cssstickyfooter.com sono la stessa idea.

fonte

2015-06-01 21:05:57 simmer

Piè di pagina che dovrebbe essere sotto tutto il contenuto, ma non risolto

risposta

Problemi correlati