Il piè di pagina non si attacca al fondo anche se l'ho codificato
https://stackoverflow.com/questions/411228
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Per il momento ho rimosso il piè di pagina, il sito doveva andare online. Quindi anche il collegamento è sparito.
Come puoi vedere (in FF2 e in IE7) il piè di pagina si trova nella parte inferiore dello SCHERMO, ma non nella parte inferiore della pagina (contenuto).
Ho questo nel mio codice:
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
e questo nel CSS:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px; /* height of the footer */
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
min-height: 100%;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
margin: 0;
}
O, per farla breve: ho seguito le istruzioni fornite qui .
Soluzione
Bene, quindi con #size all'interno del 100%, togli l'imbottitura dall'involucro e aggiungi quanto segue al #content
overflow:auto;
padding-bottom:30px;
quindi il tuo link funziona per me in FF
Altri suggerimenti
Non hai seguito abbastanza attentamente le tue istruzioni. La chiave per Layout di Matthew
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
è che il contenitore ha posizione: relativo mentre il piè di pagina ha posizione: assoluto. Questo si colloca uno dentro l'altro. Si noti che il contenitore ha uno spazio riservato per il piè di pagina riservando un'imbottitura sul fondo della dimensione del piè di pagina. Pertanto, il layout funziona solo quando l'altezza del piè di pagina è fissa.
Posizionato in modo assoluto con botttom: l'elemento 0 si posizionerà in fondo al genitore relativamente più vicino posizionato. Se non ci sono, viene invece utilizzato viewport, ed è quello che sta succedendo nel layout.
Il tuo div footer non è figlio del tuo div avvolgente.
Che ne dici di questo ?
Sposta l'imbottitura dalla parte inferiore del corpo alla parte inferiore dell'involucro #. Il piè di pagina è sempre 30px dalla parte inferiore della pagina " " a causa di quella imbottitura. Mettendolo su #wrap impedirai che il contenuto di #wrap vada dietro il tuo piè di pagina.
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
}
*#wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
padding: 0;
}
</style>
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Questo ha funzionato per me.
IMO, l'hack star di IE causa il problema. Prova a cambiare gli hack di IE con:
*html #wrap {
...
}
Esiste una tecnica abbastanza buona con la demo in questo sito: http: //www.themaninblue. com / esperimento / footerStickAlt /
Ci deve essere qualcos'altro in questa materia, ogni metodo descritto sopra funziona su siti diversi, non solo sul mio.
Questa è la fonte della mia pagina, le cose non rilevanti sono rimosse (contenuto e cose):
<body>
<div id="size"> javascript textsize modifier</div>
<div id="wrap">
<div id="top"> logoimage
<div id="menu">
<div id="menuwrapper">
<ul id="primary-nav">
<li> Homelink </li>
<li class="menuactive menuparent" class="over"> Link 2
<ul>
<li> Sublink 1 </li>
<!-- etcetera //-->
</ul>
</li>
<li class="menuparent" class="over"> Active Link 3
<ul>
<li> Sublink 1</li>
<!-- etcetera //-->
</ul>
</li>
</ul>
</div> <!-- end menuwrapper //-->
</div> <!-- end menu //-->
</div> <!-- end top //-->
<div id="content">
<div id="newssnippet"></div>
<div id="roundedright"> <!-- rounded corners //-->
<!-- 6 divs to create rounded corners //-->
<div id="right">Random main content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
<div id="logo">Another logo</div>
<div id="roundedleft"> <!-- rounded corners again //-->
<!-- 6 divs to create rounded corners //-->
<div id="left">News content</div>
<!-- 7 divs to create rounded corners //-->
</div> <!-- end rounded corners //-->
</div> <!-- end content //-->
<div id="footer"></div>
</div><!-- end wrap //-->
</body>
Chiaramente, sto seguendo il layout prescritto dal link nel post iniziale .
Quindi nel CSS ho:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: .8em;
height: 100%;
margin: 0;
padding: 0;
padding-bottom: 30px;
}
#wrap {
margin-left: auto;
margin-right: auto;
width: 960px;
position: relative;
min-height:100%;
}
*html #wrap { /* IE hack */
height:100%;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: transparent url(images/cms/footer.png) no-repeat bottom center;
padding: 0;
}
#footer p {
margin: 0;
padding: 0;
padding-top: .7em;
text-align: center;
}
#footer a {
text-decoration: none;
}
Dovrebbe essere ogni bit rilevante ...
Cosa mi sto perdendo?
Per la cronaca: il piè di pagina si attacca alla parte inferiore della salvia nella giusta posizione se il contenuto è alto meno del 100%. Quindi, se non riempie lo schermo.
Il piè di pagina è da qualche parte a metà del contenuto se il contenuto è più del 100% della pagina, quindi quando devo scorrere per vedere tutto.
