Footer haftet nicht nach unten, obwohl ich es codiert haben
https://stackoverflow.com/questions/411228
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich entfernte die Fußzeile für Vorerst Website online zu gehen hat. So wird die Verbindung auch weg.
Wie können Sie (in FF2 sowie in IE7) finden Sie in der Fußzeile am unteren Rand des Bildschirms, aber nicht am unteren Rand der Seite (Inhalt).
Ich habe in meinem Code:
<div id="wrap">
<div id="top"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
und dies in der 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;
}
Oder, was eine lange Geschichte kurz: Ich folgte den Anweisungen hier .
Lösung
Richtig, also mit dem #size innerhalb des 100%, nehmen Sie die Polsterung aus der Wrap und fügen Sie den folgenden auf die #content
overflow:auto;
padding-bottom:30px;
dann Ihr Link funktioniert für mich in FF
Andere Tipps
Sie nicht folgen Ihre sorgfältig genug Anweisungen. Der Schlüssel zum Matthew Layout
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
ist, dass Behälter position: relative während RTI hat: absolute. Das stellt ineinander. Beachten Sie, dass Behälter einen Raum für die Fußzeile durch die Reservierung padding-bottom die Größe der Fußzeile reserviert hat. Also, nur das Layout funktioniert, wenn Fußzeile Höhe festgelegt ist.
Absolut mit botttom positioniert: 0 Element selbst an der Unterseite der nächsten relativ positionierten Eltern stellen. Wenn es keine gibt, wird Ansichtsfenster verwendet statt, und das ist, was in Ihrem Layout passiert.
Ihre Fußzeile div ist kein Kind des Wickel div.
Wie wäre es diese ?
Bewegen Sie die Polsterung von der Unterseite des Körpers auf den Boden des #wrap. Ihre Fußzeile ist immer 30px von der Unterseite der „Seite“ wegen dieser Polsterung. Durch sie auf dem #wrap setzen werden Sie die Inhalte von #wrap aus gehen hinter der Fußzeile verhindern.
<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>
Das funktioniert für mich.
IMO, verursacht der IE-Sterne-Hack das Problem. Versuchen Sie, den IE-Hacks mit:
*html #wrap {
...
}
Es ist eine ziemlich gute Technik mit Demo auf dieser Seite: http: //www.themaninblue. com / Experiment / footerStickAlt /
Es ist etwas anderes zu dieser Angelegenheit sein muss, jede Methode vor allem der Arbeit an verschiedenen Stellen beschrieben, nur nicht auf meinem.
Dies ist meine Seite Quelle, nicht-relevante Dinge werden entfernt (Inhalt und Material):
<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>
Natürlich verfolge ich das vorgeschriebene Layout aus dem Link in der Öffnung Post .
Dann in der CSS, die ich habe:
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;
}
Das sollte jedes entsprechende Bit sein ...
Was bin ich fehlt?
Für das Protokoll: Die Fußzeile wird in der richtigen Position auf den Boden des oage kleben, wenn der Gehalt weniger als 100% hoch ist. Also, wenn es füllt nicht den Bildschirm.
Die Fußzeile auf halbem Wege irgendwo den Inhalt, wenn der Gehalt mehr als 100% der Seite ist, so, wenn ich every zu sehen haben blättern.
